YOUTUBE動画の埋め込みをリピート再生でサイトのBGMに使う方法

Tweet

238

HTML5なら簡単にBGMにMP3の音楽を流すことが出来ますが
そこをYOUTUBEを使ってやってしまおうというものです

なぜYOUTUBEなのか？
YOUTUBEは無料だし、YOUTUBEを使えばサーバー側の転送量を気にしなくていい！
著作権的なこともYOUTUBEに任せる

音声ファイルって数MBします、結構デカイのです
それに著作権的に勝手に音楽ファイルをアップロードしてはいけないものも有ります、でもYOUTUBEに載ってる動画なら公式なものとかも埋め込みできる場合があるのでそういう楽曲が使えるっていう事

YOUTUBEをWEBサイトに埋め込み、BGMに使う

BGMにするには、自動再生とリピート機能が必要！

自動再生させる方法

埋め込みコードの動画のURLに &autoplay=1 を付け足す

リピート再生させる方法

&loop=1&playlist=動画のID

動画のIDは
URLのリンクだと http://www.youtube.com/watch?v=sdnIsBW-45I

埋め込みのURLだと //www.youtube.com/embed/sdnIsBW-45I?rel=0

まとめるとこんな感じになります

<iframe width="200" height="115" src="//www.youtube.com/embed/sdnIsBW-45I?rel=0&autoplay=1&loop=1&playlist=sdnIsBW-45I" frameborder="0" allowfullscreen></iframe>

プレイヤーを小さくする

プレイヤーのサイズはiframeの幅と高さで操作可能、見えなくすることも可能ですが
止めるサイズぐらい表示させておいたほうが良いかな？と思います

width=”” height=”” それぞれの値を変えればサイズを変えれます

Tweet

短縮URL:

2014年02月12日 WEB制作系 BGMyoutube