web-dev-qa-db-fra.com

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

J'utilise le nouveau code iframe de youtubes pour intégrer la vidéo, mais la qualité des vidéos semble être de moindre qualité que si je les regardais sur YouTube Existe-t-il un moyen d'intégrer une vidéo de haute qualité?

Mon code pour le moment est 

<iframe title="YouTube video player" width="650" height="390" src="http://www.youtube.com/embed/6X3zUh8RqbY" frameborder="0" allowfullscreen></iframe>
htmlyoutubeembedyoutube-api
21
geoffs3310

& vq = hd720 ou & vq = hd1080 a fait le tour alors que tout le reste a échoué

32
Jason Renaud

Le code suivant a fait le tour pour moi:

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

Essayez ceci pour une qualité vidéo spécifique.

144p: & vq = minuscule

240p: & vq = petit 

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>
2
Ravat Parmar

De plus, il semble que YouTube fournisse maintenant automatiquement la qualité qu’elle pense être optimisée pour la taille de l’incorporation, pour iframe et AS3, que le paramètre HD soit défini ou non.

Voir cet article , et this pour plus d'informations.

UPDATE: Voir Réponse de Jason Renaud pour une bonne méthode permettant de forcer explicitement le type de qualité. Je l'ai essayé avec un lecteur intégré à HTML5, et cela a fonctionné comme prévu.

2
Tyson Phalp

_ {Il semble que la réponse change avec le temps.} _ Pour examiner la méta de ce qui se passe, il semble qu'il existe deux généralités pour l'effet souhaité.

1) Vous pouvez essayer et 'bidouiller' le code iframe lui-même.

2) Vous pouvez essayer de créer un conteneur pour tromper l’iframe en lui faisant croire qu’il devrait afficher la HD.

Faisons les deux.

[CODE IFRAME SPÉCIFIQUE] Vous pouvez éventuellement éditer le lien intégrer youtube iframe typique à l'aide des normes en vigueur. Je recommanderais d'utiliser une taille de base qui exigerait de toute façon cette taille et de procéder à la deuxième étape pour la redimensionner. 

Recherchez une liste en cours telle que celle sur h3xed pour voir comment youtube appelle les fichiers lors de l’incorporation. 

A noter que je n'ai trouvé le code suivant nulle part, je l'ai découvert. Je dois appeler des vidéos au format 720. Je cherchais la réponse à cette question et, lors de la visualisation du fichier, j’ai remarqué qu’il était indiqué que le paramètre youtube était 720p60 . J'ai donc modifié ce qui semble avoir fonctionné auparavant et bien 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, essentiellement, j’ai ajouté ? rel = 0 & vq = hd720p60 Et que la taille de l’iframe était suffisamment grande pour demander hd.

[CRÉATION D'UN CONTENANT] Cela fonctionne parce que vous demandez à YouTube une vidéo de meilleure qualité, que vous redressez ensuite et que vous le redimensionnez pour l'adapter à l'espace souhaité. Bien que vous demandiez directement comment intégrer, je suppose que vous demandez à intégrer quand et où vous le souhaitez, sans vous limiter aux vidéos géantes sur la page pour obtenir des fichiers de haute qualité.

Un simple conteneur responsive fonctionne bien puisque les iframes sont conçus pour être contrôlés via CSS. En utilisant un code similaire à celui qui se trouve dans l'article Force-Embedded-Youtube-Vidéos-To-Play-In-HD nous créons un code qui limite le rapport de format à 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%;
}

* À noter: le code 'Legacy' de &fmt=35, &fmt=22, or &fmt=37 fonctionne à ce stade pour les liens vidéo. La vidéo youtube s'ouvre à cette qualité spécifique. 

Notez également que vous devez également remarquer une différence de temps entre les vidéos youtube et les vidéos incorporées. De par mon expérience, ils ne sont pas compatibles entre eux. * (youtube.com/embeded ... VS youtu.be/...)

1
systemaddict