Page 1 of 1
How do you embed YouTube video, full width and auto height?
Posted: Wed Jan 27, 2016 6:03 am
by simonmlewis
We have a youtube video we want on our homepage, but we now want it to be 100% wide.
Easy. But we also need the height of the video to fit the video. I can adjust it in the iframe so it is 100% wide and 500px tall, but on a mobile that makes the video area very tall.
Is there a method to the height to be automatically correct for the width of the video? So it kind of "stretches/contracts" to fit?
Re: How do you embed YouTube video, full width and auto heig
Posted: Wed Jan 27, 2016 6:25 am
by Celauran
Videos are typically 16:9, so if you have the width you can calculate the height.
Re: How do you embed YouTube video, full width and auto heig
Posted: Wed Jan 27, 2016 6:36 am
by simonmlewis
Let's say I wanted to embed this code.
Code: Select all
<iframe width="560" height="315" src="https://www.youtube.com/embed/3Ub6BdLFWyg" frameborder="0" allowfullscreen></iframe>
I want it to be 100% wide, and for the height to automatically be correct.
do I have to manually set the height? because on a phone, the side can be various so there will always be blacks up and below it. I want rid of the black borders.
Re: How do you embed YouTube video, full width and auto heig
Posted: Wed Jan 27, 2016 6:39 am
by Celauran
Yes, the height needs to be set. If you don't specify a height, you get a very small default. As I've already mentioned, though, you've got the width and the aspect ratio, so it's trivial to calculate. As the viewport size changes, your width changes, so you recalculate the height.
Re: How do you embed YouTube video, full width and auto heig
Posted: Wed Jan 27, 2016 6:41 am
by Celauran
Re: How do you embed YouTube video, full width and auto heig
Posted: Wed Jan 27, 2016 6:53 am
by simonmlewis
Oooo i like that. Will have a go at what he wrote about. That's exactly it. Tho we set it to 100% wide, but will try it.