Force youtube embed to start in 720p
(This answer was updated, as the previous method using vq
isn't recognized anymore.)
Specifying the height of the video will change the quality accordingly.
example for html 5;
<iframe style='width:100%; height:800px;' src='https://www.youtube.com/embed/xxxxxxxx'></iframe>
If you don't want to hardcode the width and height you can add a class to the iframe for css media queries.
Tested on a working server + passes the w3.org nuhtml validator.
How to force youtube to play HD videos
I just solved this problem for a website I was working on.
I have embedded iframes with youtube videos in them and they, annoyingly, auto-played at a low resolution despite my wanting them to auto-play at 720p. This issue is caused by the actual size of the video, on your page, being detected by YouTube which will trigger an auto-selection of a lower res.
Here's what I did to keep my video embed small, but have it auto play on 720p etc -
- You need to add ?vq=hd720 at the end of your video id, as you have done.
- Manually set the iframe width to width="1280" height="720" - which will make the video huge on your site.
- Wrap the iframe in a div and give it a class selector so you can style it with css.
- Use CSS to tell your div wrapper to be the size you actually want the video to be.
- Use CSS to set the iframe width:100% and height:100%.
This code will basically set the video size to be that of the resolution you want it to auto-play on, which will trick YouTube into setting this for you. Then the CSS dynamically resizes the video to be whatever actual size you need.
And that's all there is to it :)
CODE EXAMPLE:
HTML
<div class="youtube-embed">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/VIDEOID?vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>
CSS
.youtube-embed {
width : 740px;
height : 400px;
}
.youtube-embed iframe {
width : 100%;
height : 100%;
}
Force embedded youtube video to HD 5K (2020)
Regarding mobile devices: Described in the YouTube documentation, they do not support forcing the quality anymore. I hope anyone comes up with a solution, but for now you cannot change it. See https://support.google.com/youtube/answer/91449 for more info.
edit; I know this is not the answer you wanted of course. We are going to implement Plyr to overcome these issues. Maybe this can help you too.
Related Topics
Zebra Striping a Flexbox Table with Wrapping Items
Fallback Background-Image If Default Doesn't Exist
How to Force Fully Download Txt File on Link
Prevent a Centered Layout from Shifting Its Position When Scrollbar Appears
What Is a Non-Replaced Inline Element
Can Outlook 2010 Use a Web Font in an HTML Email
How to Use Webp Images and Support Safari
Get Parameters in The Url with Codeigniter
Chrome Does Not Expand Flex Parent According to Children's Content
Hide Text, But Have It Show Up If Copied and Pasted Without JavaScript
Link to an Element Within The Current Page
How to Remove The Dotted Line Around The Clicked a Element in HTML
Alternate Background Colors for List Items