Control Size of Embedded YouTube Video

When embedding a YouTube video into a Courselink site or otherwise, often we need to make it fit within a widget, news frame, or otherwise constrained space. At the same time, we want to present the best quality version of the video possible, so if the user goes fullscreen, they see the full resolution available.

To do this, we must adjust a few parameters in the embed code as follows. 

The YouTube standard embed code looks like this:

The code for forcing a video to play in HD is:

Note the last bit of code
src=http://www.youtube.com/embed/RrphKwWOfcg?rel=0&vq=hd1080

By appending the last parameters,  we have forced HD in the embed. But now how do we control the size of the video itself to fit our constraints?

We can use the size dropdown to select a few scaled versions:

Selecting these will auto-update the code in the embed box above it. However this may still not provide enough flexibility. In which case, we can manually set the size to suit our needs.

The code for controlling the size of the iframe the video appears in is:

Note the last bit of code
iframe width=”853″ height=”480″

For a list of sizes to try, we can use this 16×9 resolutions calculator (YouTube places all videos in a 16×9 frame).

So putting this all together, our embed code might look something like this:

iframe width=”640″ height=”360″ src=”https://www.youtube.com/embed/9uKgRLAULXo?rel=0&vq=hd1080″ frameborder=”0″ allowfullscreen=””

Leave a Reply