How to embed high quality video with new YouTube iframe style code

Question

I am using youtubes new iframe code to embed video but the videos seem to be lower quality than if I watch them on youtube. Is there a way to embed the high quality video?

Answer 1

Also, it seems that YouTube now automatically serves up the quality that it thinks is optimized for the size of the embed, for iframe and AS3, regardless of whether or not the HD parameter is set.

See this post, and this for more information.

UPDATE: See Jason Renaud's answer for a good method that allows explicitly forcing the quality type. I tried it with an HTML5-embedded player, and it worked as expected.

Answer 2

Oh I've found it now you have to put ?vq=hd720 on the end of the url like so:

<iframe title="YouTube video player" width="650" height="390" src="http://www.youtube.com/embed/6X3zUh8RqbY?vq=hd720" frameborder="0" allowfullscreen></iframe>

Answer 3

The following code did the trick for me:

<iframe width="241" height="136" src="https://www.youtube.com/embed/NMG0CMkuUnA?version=3&vq=hd720" frameborder="0" allowfullscreen></iframe>

Answer 4

It seems that the answer changes with time. To look at the meta of what is going on, it seems that there are two generalities to the desired effect.

1) You can try and 'hack' the iframe code itself.

2) You can try and create a container to trick the iframe into thinking it should display HD.

Let's do both.

[ SPECIFIC IFRAME CODE] You can possibly edit the typical embed youtube iframe link using current standards. I would recommend using a base size that would demand that size anyways and proceeding with step two to resize it.

Look up a current listing such as the one on h3xed to see the way youtube calls the files when embedded.

Of note, I didn't find the following code anywhere, I discovered it. I need to call videos that are 720. I was looking for the answer to this question and when viewing the file I noted that it said 720p60 as the actual youtube setting. So I altered what seems to have worked before and sure enough...

<div class="responsive-container" >
   <iframe width="780" height="480"
           src="https://www.youtube.com/embed/DFzUdTUaAr4?rel=0&vq=hd720p60" frameborder="0" allowfullscreen></iframe>
</div>

worked. Note that essentially I added ?rel=0&vq=hd720p60 And made the iframe size large enough to demand hd.

[ CREATING A CONTAINER ] This works because you are asking youtube for a higher quality video and then going behind it's back and resizing it to fit the space you desire. Although you directly ask how to embed, I'm assuming you're asking to embed whenever and wherever you want - not being restricted to giant videos on page for high quality files.

A simple responsive container works well since iframes are made to be controlled through CSS. Using code similar to that found on thenewcode's Force-Embedded-Youtube-Videos-To-Play-In-HD article we create a code that restricts the aspect ratio to a limited size.

.responsive-container {
    position: relative;
    padding-bottom: 53.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.responsive-container,
    .responsive-container iframe {
    max-width: 1280px;
    max-height: 720px;
}
.responsive-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

---

*Of note: 'Legacy' code of &fmt=35, &fmt=22, or &fmt=37 works at this point for video links. The youtube video opens up at this specific quality.

Also note that you also have to notice a difference in tdl between youtube videos and embedded videos. They are (from my experience) not cross compatible. * (youtube.com/embeded... VS youtu.be/...)

Answer 5

&vq=hd720 or &vq=hd1080 did the trick where all else failed

Answer 6

Try this for specific quality of video..

144p : &vq=tiny

240p : &vq=small

360p : &vq=medium

480p : &vq=large

720p : &vq=hd720

example :

<iframe width="320" height="350" src="http://www.youtube.com/embed/
HeQ39bLsoTI?autoplay=1&cc_load_policy=1&vq=tiny" frameborder="0"
allowfullscreen></iframe>