Responsive YouTube iframes
Embedding a YouTube video into your Canvas course is easy. You can always just copy/paste a link to a video, but a better approach is to embed the video using the embed code that YouTube provides. To view and copy code for responsive YouTube iframes and see them in Canvas, visit the HowToCanvas course.
When you embed a video, YouTube specifies the width to be 560 pixels wide and 315 pixels tall. This is a 16:9 ratio, which is a typical screen dimension for modern TVs, phone and tablet screens, YouTube videos, projectors, computer monitors, etc. For every 16 pixels or inches wide, the screen has 9 tall. This means the height is 56.25% of the width.
A constraint we have with setting a fixed code is that we need to typically need to define both the width and the weight. We could put the width to 720 and the height to 630, or the width to width to 420 and height 236. We just need to maintain the 16:9 ratio. This means we can’t define the code to be 100% or 50% of the width of the screen while it is 315 pixels tall. If it is a large screen like a 27” monitor then 100% width could be 900+ pixels, while still being 315 tall - resulting in a long and wide. Likewise, a video with a 50% width set to 315 pixels tall will appear tall and skinny with dead space on the top and bottom. See the two awkward examples below.
What we want to investigate is whether we can define a % width while maintaining the aspect ratio. So as the width increases of decreases, the height will also increase or decrease so that the video remains 16:9. To do this we are going to define some <div> elements to house the <iframe> that Canvas provided us. Here is the code that you will want to copy:
<div style="width: 100%; min-width: 400px; max-width: 800px;">
<div style="position: relative; width: 100%; overflow: hidden; padding-top: 56.25%;">
<p><iframe style="position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; border: none;" src="https://www.youtube.com/embed/-SXbjBKAPGI" width="560" height="315" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe></p>
</div>
</div>The first <div> is specifying that the element (in this case our YouTube video) should be 100% the width of the screen. However, I have decided that I don’t want it to be any smaller than 400 pixels wide or larger than 800 pixels wide. You can change these values to anything you want. You can have a width of 50%, minimum of 250 pixels and max of 600 pixels. Or you can remove the min or max values altogether.
The second <div> defines the relative position, which is necessary for this code. I’m also specifying that the with is 100%. If I chose another value, such as 50%, then the second <div> would sit within the first and would be 50% of the width of that first <div>.
The first <div> is set to 100%, meaning it will span the entire width of the screen (regardless the screen size). The second <div> is set to 50% of the first <div>, so it will take up 50% of the entire screen.
The first <div> is set to 50%, meaning it will span exactly half the width of the screen (regardless the screen size). The second <div> is set to 50% of the first <div>, so it will take up 25% of the entire screen.
Again, regardless the width of the first <div>, you’ll likely want the second <div> width to be 100% so that it matches the first.
The next value we are looking at is: overflow: hidden. This means that if the element we are embedding happens to be taller or wider that what we are defining, it will simply be cropped. It’s still “there”, but it will be hidden from the viewer.
The final bit is code is extremely important: padding-top: 56.25%. What we are saying here is that regardless the width, we want there to be 56.25% height. 100:56.25 is the same ratio as 16:9. So we are clarifying that for every 16 pixels of width, we want the <div> to be 9 pixels tall. If I were to embed a video that for some reason was a 1:1 ratio (like an instagram video), then I would set the height to 100% instead of 56.25%. That means the height would be 100% of the width. If the video were 4:3, like the old videos up through the 90’s when we had squarish TVs, then I would specify the height to be 75%, because 3 is 75% of 4. I would equate 3/4 = .75, and .75*100 is 75. For the vast majority of YouTube videos that you will embed, you’ll want to use 56.25% and you’ll be set.
So now we’re pretty much set. We’ve defined our two <div>s where we can place our video, and you can paste your embed code within the second <div>. You can paste it as is, and you’ll want to add the following code somewhere in your iframe:
style="position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; border: none;"The result will be a video that scales to the width of the viewers screen as you define, while keeping the aspect ratio intact.
Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas
You can also visit our companion Canvas course for examples of our tips and tricks.
And follow us on social media
Twitter: https://twitter.com/HowToCanvas
Instagram: https://www.instagram.com/HowToCanvas
Facebook: https://www.facebook.com/HowToCanvas