2012-08-31 14 views
5

金曜日の午後が何とか蹴っているかもしれませんが、なんらかの理由で埋め込みのYoutubeビデオにフルスクリーンボタンが表示されないようです。だから、Youtube Iframe no fullscreen button

<iframe width="560" height="315" src="http://www.youtube.com/embed/hFoQVx8ZcHo?rel=0" frameborder="0" allowfullscreen></iframe> 

このコード私が見http://jsfiddle.net/chricholson/v8sjL/と例えば:私がやっているすべては、YouTubeのビデオから生成される共有コードをコピーしている

enter image description here

私が言ったいくつかの記事を見つけましたURLが間違っているのは/embed/[code]ではなく/v/[code]ですが、Youtubeから直接コピーしても安全だと思いました。

答えて

21

私が変化し、最終的なコードの数を必要なようだ:

<iframe width="560" height="315" src="http://www.youtube.com/embed/hFoQVx8ZcHo?rel=0&fs=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>​ 

はまず、URLが、これは表示するボタンをトリガし、&fs=1を必要とします。さらに、webkitallowfullscreenmozallowfullscreenが必要です。これは、ブラウザ固有の問題を解決する明白なものです。

私が見つけた興味深いものは、作業用コードを持っているにもかかわらず、このサンプルはjsfiddleで動作しません。おそらくiframeの内部と関係しています。私が意味するところはhttp://jsfiddle.net/mrchris2013/v8sjL/5/を参照してください。

+0

はあなたに感謝クリス:)非常に有用な –

+1

"?fs = 1"の部分は必要ではないようです。最新のChromeでは、それだけで十分な画面が動作します。私は他のブラウザがwebkitallowfullscreenおよび/またはmozallowfullscreenを必要とするかもしれないと思います – matteo

3

リンクの最後に&fs=1を削除しなければならないと予想されたため、フルスクリーンオプションが戻ってきました。

<iframe width="1280" height="720" src="http://www.youtube.com/embed/doXntJaJ-nQ" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
+0

これは正解であり、現在受け入れられているものではないようです – matteo

3

解決済み!あなたがメインのHTML内部のiframe(jsfiddle)内のiframe(ユーチューブ)を持っている場合、あなたはそれが動作するためには、両方のiframeに

webkitallowfullscreen mozallowfullscreen allowfullscreen

を定義する必要があります.....