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

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

普通に、swfobjectを使ったりして、YouTube JavaScript Player APIを使えば、

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

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

別に、ロードしてから3秒とかなら、

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

やってることは、
YouTube 埋め込みプレーヤーのパラメータ:http://code.google.com/intl/ja/apis/youtube/player_parameters.htmlを使って、自動再生するようにしたiframe型の埋め込みプレーヤーを、DOMを書き換えて一定時間後に、読み込み→再生をやらせているだけです。

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

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