web-dev-qa-db-ja.com

新しいYouTube iframeスタイルコードで高品質のビデオを埋め込む方法

YouTubeの新しいiframeコードを使用して動画を埋め込みますが、動画をYouTubeで見るよりも品質が低いようです。高品質のビデオを埋め込む方法はありますか？

現時点での私のコードは

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

＆vq = hd720または＆vq = hd1080は、他のすべてが失敗したトリックを行いました

33
Jason Renaud

次のコードは私のためのトリックをしました：

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

ビデオの特定の品質のためにこれを試してください。

144p：＆vq = tiny

240p：＆vq = small

360p：＆vq = medium

480p：＆vq = large

720p：＆vq = hd720

例：

<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

また、YouTubeは、HDパラメータが設定されているかどうかに関係なく、iframeとAS3の埋め込みのサイズに最適化されていると考えられる品質を自動的に提供するようです。

詳細については、 this post および this を参照してください。

更新：品質タイプを明示的に強制できる適切な方法については、 Jason Renaud's answer を参照してください。 HTML5埋め込みプレーヤーで試してみましたが、期待どおりに機能しました。

2
Tyson Phalp

答えは時間とともに変化するようです。起こっていることのメタを見ると、望ましい効果には2つの一般性があるようです。

1）iframeコード自体を 'hack'してみてください。

2）コンテナを作成して、iframeをだましてHDを表示するようにさせることができます。

両方をやろう

[特定のIFRAME CODE]現在の標準を使用して、一般的なembed youtubeiframeリンクを編集できます。とにかくそのサイズを要求する基本サイズを使用し、ステップ2に進んでサイズを変更することをお勧めします。

h3xed のような現在のリストを調べて、埋め込み時にyoutubeがファイルを呼び出す方法を確認します。

注目すべきことに、私はどこにも次のコードを見つけられず、発見しました。私は720のビデオを呼び出す必要があります。この質問に対する答えを探していましたが、ファイルを見ると、実際のyoutube設定として720p60と書かれていました。だから私は以前に働いていたと思われるものを変更し、十分に確実に...

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

働いた。基本的に？rel = 0＆vq = hd720p60を追加し、iframeサイズをhdを要求するのに十分な大きさにしたことに注意してください。

[コンテナの作成]これは、YouTubeに高品質のビデオを要求し、背後に戻って希望するスペースに合わせてサイズを変更するためです。 。埋め込み方法を直接尋ねますが、高品質のファイルのページ上の巨大なビデオに制限されることなく、いつでもどこでも埋め込みを行うよう求めていると思います。

IframeはCSSを介して制御されるため、シンプルなレスポンシブコンテナはうまく機能します。新しいコードの Force-Embedded-Youtube-Videos-To-Play-In-HDの記事 にあるようなコードを使用して、アスペクト比を制限されたサイズに制限するコードを作成します。

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

*注意：&fmt=35, &fmt=22, or &fmt=37の 'レガシー'コードは、ビデオリンクに対してこの時点で機能します。 youtubeビデオは、この特定の品質で開きます。

また、YouTubeビデオと埋め込みビデオのtdlの違いにも注意する必要があります。 （私の経験から）それらは相互互換性がありません。 *（youtube.com/embeded ... VS youtu.be/...）

1
systemaddict