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

YOUTUBE動画の埋め込みをリピート再生でサイトのBGMに使う方法
このエントリーをはてなブックマークに追加
PR

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>

 

DEMO 表示

 

プレイヤーを小さくする

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

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

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)