# iframeで読み込んだYouTubeの動画を一定時間後に自動再生する

- リンク: https://torounit.com/blog/iframe%e3%81%a7%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a0youtube%e3%81%ae%e5%8b%95%e7%94%bb%e3%82%92%e4%b8%80%e5%ae%9a%e6%99%82%e9%96%93%e5%be%8c%e3%81%ab%e8%87%aa%e5%8b%95%e5%86%8d%e7%94%9f/
- 公開日: 2011-12-30T10:30:52+09:00
- 作成者: Toro\_Unit

現在制作中のサイトで、最初にスプラッシュを入れて、そのあと、Youtubeの動画を再生しよう
という事をすることになりました。

普通に、swfobjectを使ったりして、[YouTube JavaScript Player API](http://code.google.com/intl/ja/apis/youtube/js_api_reference.html)
を使えば、

[js]
 window.setTimeout(function() { ytplayer.playVideo }, 3000); [/js]

とかやれば良いのですが、今時iPhone等のFlashが使えない媒体もあるので、できれば、HTML5
プレーヤーを使いたいんですよね。しかしYouTubeからHTML5のAPIはたぶん提供されていない
ようなので、されていたとしても、Flashとの切り替えなども実装するのは正直面倒。という
わけで、何とかYouTubeが提供しているiframeでの埋め込みコードを使ってなんとか実現しよう
と思います。

というわけで、jQueryで書いてみました。無駄にdelayメソッドを使ってみました。何かの
要素を表示した後にとか、そういう使い方もできます。

[js]
 jQuery(document).ready(function(){ $(this).delay(3000).queue(function(){ $("#
mainMovie").html(‘<iframe width="960" height="540" frameborder="0" allowfullscreen
="" src="http://www.youtube.com/embed/ID?autoplay=1"></iframe>’); $(this).dequeue();});});[/
js]

別に、ロードしてから3秒とかなら、
 [js] jQuery(document).ready(function(){ setTimeout(
function(){ $("#mainMovie").html(‘<iframe width="960" height="540" frameborder="
0" allowfullscreen="" src="http://www.youtube.com/embed/ID?autoplay=1"></iframe>’);},
3000); }); [/js]

でも全然動きます。むしろこっちの方がベターな気もします。

やってることは、
 [YouTube 埋め込みプレーヤーのパラメータ:http://code.google.com/intl/ja/apis/youtube/player_parameters.html](https://torounit.com/blog/iframe%e3%81%a7%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a0youtube%e3%81%ae%e5%8b%95%e7%94%bb%e3%82%92%e4%b8%80%e5%ae%9a%e6%99%82%e9%96%93%e5%be%8c%e3%81%ab%e8%87%aa%e5%8b%95%e5%86%8d%e7%94%9f/ http://code.google.com/intl/ja/apis/youtube/player_parameters.html)
を使って、自動再生するようにしたiframe型の埋め込みプレーヤーを、DOMを書き換えて一定
時間後に、読み込み→再生をやらせているだけです。

自動再生させるには、動画のURLの最後に?autoplay=1をつければ良いだけです。

もっとスマートな実装方法が出てくればイイですよね。