Comment intégrer une vidéo de haute qualité avec un nouveau code de style iframe YouTube

&vq=hd720 ou &vq=hd1080 a fait le tour où tout le reste a échoué

le code suivant a fait l'affaire pour moi:

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

en outre, il semble que YouTube sert maintenant automatiquement la qualité qu'il pense est optimisé pour la taille de l'embed, pour iframe et AS3, indépendamment du fait que le paramètre HD est défini ou non.

Voir ce post , et ce pour plus d'informations.

mise à JOUR: Voir Jason Renaud réponse pour une bonne méthode qui permet explicitement de forcer le type de qualité. J'ai essayé il est doté d'un lecteur HTML5 intégré, et il a fonctionné comme prévu.

Essayez ceci pour la qualité spécifique de la vidéo..

144p : &vq=minuscule

240p : &vq=petits

360p : &vq=moyen

480p : &vq=grand

720p: & vq=hd720

exemple:

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

Il semble que la réponse change avec le temps. Regarder le méta de ce qui se passe, il semble qu'il y a deux généralités de l'effet souhaité.

1) vous pouvez essayer et 'hack' le code iframe lui-même.

2) Vous pouvez essayer de créer un conteneur pour tromper l'iframe en pensant qu'il devrait afficher HD.

faisons les deux.

[CODE IFRAME SPÉCIFIQUE] Vous pouvez éventuellement éditer le lien typique embed youtube iframe en utilisant les normes actuelles. Je recommande d'utiliser une taille de base qui exigerait cette taille de toute façon et passer à l'étape deux pour la redimensionner.

Rechercher une liste actuelle comme celle sur h3xed pour voir la façon youtube appelle les fichiers lors de l'embedded.

trouvez le code suivant n'importe où, je l'ai découvert. Je dois appeler les vidéos qui sont 720. Je cherchais la réponse à cette question et en regardant le fichier j'ai noté qu'il disait 720p60 comme le cadre réel de youtube. Donc j'ai modifié ce qui semble avoir fonctionné avant et c'est sûr...

<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>

travaillé. Notez que j'ai essentiellement ajouté ?rel=0&vq =hd720p60 Et a fait la taille iframe assez grand pour exiger hd.

[CRÉATION D'UN CONTENEUR] Cela fonctionne parce que vous demandez youtube pour une vidéo de meilleure qualité et puis aller derrière il est de retour et de le redimensionner pour correspondre à l'espace que vous désirez. Bien que vous demandiez directement comment intégrer, je suppose que vous demandez à intégrer quand et où vous voulez - ne pas être limité aux vidéos géantes sur la page pour les fichiers de haute qualité.

un simple conteneur réactif fonctionne bien puisque les iframes sont faites pour être contrôlées par CSS. En utilisant un code similaire à celui trouvé sur l'article du code , nous créons un code qui limite le format d'image à une taille limitée.

.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%;
}