Width-Responsive YouTube Videos

One of the non-optimum things about YouTube videos embedded in your content is that the code YouTube provides is not responsive to browser or column width.

The iframe tag YouTube provides has no CSS styling.

CSS could be added to the iframe tag. @media tags could then be used to adjust its height and width at certain break points.

(A break point is a width specified in the @media tag. When that width is reached or passed, the CSS in the @media tag is activated. The @media tag width specification relates to the width of the browser window, not the width of the column the YouTube video is published in.)

Instead of adjusting the video size when certain break points are passed, with its significant and jerky size change, I'll show you how to accomplish smoothly-adjusted YouTube video sizes. The size of the iframe is adjusted according to the width of the column it's published in. The effect is similar to responsive images and a responsive HTML5 video tag.

JavaScript is used for this method.

Here's an example. As the width of the content column changes, the video width changes with it. Change your browser width until you see a different video width. The height stays proportional to the width.

How to Implement It

At the YouTube website, find the video you want to embed.

Click the "Share" link.

Next, click on "Embed".

You'll see an iframe tag. The code will look something like this.

<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/bWPMSSsVdPk?rel=0" frameborder="0" allowfullscreen></iframe>

Copy the entire tag from the YouTube site and paste it into your web page.

Paste this id attribute into the iframe tag.

id="youtube-video-iframe"

After pasting in the id attribute, the iframe will look something like this.

<iframe id="youtube-video-iframe" width="640" height="360" src="https://www.youtube-nocookie.com/embed/bWPMSSsVdPk?rel=0" frameborder="0" allowfullscreen></iframe>

Save the iframe tag code. You'll need it in a moment.

Below is the entire code for implementing width-responsive YouTube videos. The place to insert the YouTube iframe tag code is marked. The JavaScript may be placed anywhere below the video, even all the way down the page to just before the cancel </body> tag, if you wish, or pulled in from an external file.

Comments follow the code.

<div id="video-width-measure" style="width:100%;"></div>

--YOUTUBE IFRAME TAG GOES HERE--

<script>
var IframeHolder = "video-width-measure";
var YouTubeIframeID = "youtube-video-iframe";
var Ratio = 0.0;
function DetermineRatio()
{
   var d = document.getElementById(YouTubeIframeID);
   var w = d.width;
   var h = d.height;
   return h/w;
} // function DetermineRatio()

function AdjustWidthOfVideo()
{
   if( Ratio <= 0.0 ) { Ratio = DetermineRatio(); }
   var maxWidth = parseInt( document.getElementById(IframeHolder).scrollWidth);
   var d = document.getElementById(YouTubeIframeID);
   h = parseInt(maxWidth*Ratio);
   d.width=maxWidth;
   d.height=h;
} // function AdjustWidthOfVideo()

function AppendOnresizeEvent(f)
{
   var cache = window.onresize;
   if(typeof window.onresize != 'function') { window.onresize = f; }
   else
   {
      window.onresize = function()
      {
         if (cache) { cache(); }
         f();
      };
   }
} // function AppendOnresizeEvent()

AdjustWidthOfVideo();
AppendOnresizeEvent(AdjustWidthOfVideo);
</script>

Code comments.

That first line of the source code, the div with the id="video-width-measure" attribute, measures the width of the column where the video will be published. This is required because the iframe tag can't be used to measure the web page's column width. (If your column width has a maximum width, add the CSS rule max-width:555px; to the style, except replace "555" with the maximum width in pixels.)

Locate the spot where the YouTube iframe tag code is to be inserted. Replace --YOUTUBE IFRAME TAG GOES HERE-- with the iframe tag.

Two places in the JavaScript might need customization — the lines are colored blue at the customization point. The lines specify the id value of the div with the id="video-width-measure" attribute and the id value of the YouTube iframe tag. If div tag's id value is changed or the iframe tag's id value is changed, then customize the JavaScript accordingly.

That is all you need. Pop it into your web page and you have a width-responsive YouTube video.

(This article first appeared in Possibilities ezine.)

Will Bontrager