facebook動画と同じように、ページに置いたYouTube動画を自動再生する
top-bnr

facebook動画と同じように、ページに置いたYouTube動画を自動再生する

   2015/08/04

ユーチューブ動画自動再生

最近facebookのタイムラインに、動画が投稿されていると スクロールして表示されたタイミングで再生されるのをよく目にします。

先日お客様から、YouTube動画でも同じようにできないの?と ご相談を受けましたので、作成してみました。

 

簡単に作成したので、コードは改善の余地がありますが・・・

サンプルとしては、こんな感じです。

<script src="://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(function(){
    $(window).scroll(function (){
        $("iframe[src*='www.youtube.com']").each(function(){
            var imgPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > (imgPos - windowHeight + 200) && this.src.indexOf('autoplay=')<=0){
                var palam = [], hash; 
                var t = this.src.slice(this.src.indexOf('?') + 1).split('&'); 
                for(var i = 0; i < t.length; i++) { 
                    hash = t[i].split('='); 
                    palam[hash[0]] = hash[1]; 
                } 
                palam['autoplay']=1;
                var url = this.src.substring( 0, this.src.indexOf('?')+1 );
                for (var key in palam) {
                    url = url + key + '=' + palam[key] + '&';
                }
                this.src = url;
            }
        });
    });
});
// ]]></script>
3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
0 
<iframe src="http://www.youtube.com/embed/a4Wm84SNamg?rel=0" width="640" height="400" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

 

本来なら、YouTubeのAPIを利用すれば音量なども調整できますので 良いのですが、今まで設置した動画タグの修正が必要になるかと思いましたので Javaスクリプトを設置すれば、動くように意識して作成してみました。

 

デモを実行すると、別ウィンドウが開きますので
右下の枠をスクロールしてみてください。

 

これなら今まで作成したページに設置してあるYouTube動画の埋め込みタグを

修正しないで、スクロールしたら自動再生できますので

再生回数も、ページ滞在時間も、もしかしたら上がるかもしれません。






The following two tabs change content below.
リアルマックス スタッフ
bottom-bnr
  • ブログランキング・にほんブログ村へ
  • FC2ブログランキングへ
  • 人気ブログランキングへ
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

関連記事-こちらもどうぞ

  • 記事はありませんでした。これから充実させていきますのでお楽しみに!