Okay
  Public Ticket #1142053
Blog - video embeds
Closed

Comments

  •  2
    Zach started the conversation

    In a blog post is there a way to embed Youtube or Vimeo link without black bars bordering either the horizontal frame or vertical frame? 

    I created a dummy blog post to test on, embedded two Vimeo videos using custom width and height. A smaller width video of 640px creates black bars on left and right side of embed. A widescreen width video of 997px creates black bars on top and bottom. 

    The bars expand and contract depending on the width of the webpage when I adjust the page width.

    I've attached two screenshots:

    "Current.jpg" shows what's happening.

    "Preferred.jpg" shows what I would like it to display as.

  •  70
    mSupport replied

    This is a major problem since 2009..

    I made a research and found some solution.

    You can implemented yourself or if you provide the wordpress login details we can try to make it work.

    https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

    Thanks!

    Thank You!

  •  2
    Zach replied

    How would I go about adding custom Javascript? 

  •  70
    mSupport replied

    Add this code 

     // Find all YouTube videos
    var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com']"),     // The element that is fluid width
        $fluidEl = $("body"); // Figure out and save aspect ratio for each video
    $allVideos.each(function() {   $(this)
        .data('aspectRatio', this.height / this.width)     // and remove the hard coded width/height
        .removeAttr('height')
        .removeAttr('width'); }); // When the window is resized
    $(window).resize(function() {   var newWidth = $fluidEl.width();   // Resize all videos according to their own aspect ratio
      $allVideos.each(function() {     var $el = $(this);
        $el
          .width(newWidth)
          .height(newWidth * $el.data('aspectRatio'));   }); // Kick off one resize to fix all videos on page load
    }).resize();

    in the main.js at the bottom just before the 

    } );

    You will find main.js via ftp on wp-content/themes/maav/assets/js

    Also on the css code 

    .videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
    }

     Remove the padding-top 25px.

    Everything should work fine after this.

    Remember to put your iframes inside the div  videoWraper like the example bellow

    <div class="videoWrapper">
       <iframe src="https://player.vimeo.com/video/177929559?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
    </div>

    Let me know if you managed!

    Thanks!

    Thank You!

  •  2
  •  2
    Zach replied

    Does this only eliminate black bars on videos in 16:9 aspect ratio? 

    For instance video resolution 1920x1080 appear fixed, but resolution 1920x808 still keep black bars on top and bottom. http://zachboyce.com/2017/04/20/test/

  •  2
    Zach replied

    I actually figured this out on my own. 

    Had to create a new <div> for custom CSS

    .videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
    }
    .videoWrapper-ExtremeWidth {
        position: relative;
        padding-bottom: 48%; /* 2:35 */
        padding-top: 25px;
        height: 0;
    }

    But now all works! Thank You for your assistance :)

  •  70
    mSupport replied

    Thats great!

    Thanks!

    Thank You!