動画素材.com/ブログ

VJ 映像素材・4K2K CG ムービー素材・書籍「動画素材123」、PV・MVなどの公開、映像制作関連、Mac・iPhone・iPadとか。動画素材.comの管理人ブログです。

WordPress YouTube

サイトに埋め込んだYouTubeの動画を自動再生自動ループ及びミュートさせる

投稿日:2017年1月4日 更新日:


自分のサイトでYouTubeの動画を自動再生自動ループでなおかつミュートさせていますのでそのやり方を残しておきます。

やりたかったポイントとしては

・自動で再生する。
・自動でループする。
・ミュートさせる。

の3つです。


さらに付け足すと
・同じページで複数配置できる。
・連続で違う動画を再生させる。
です。


これらを実現させるのにがっつりと参考にさせていただいたサイトはこちら

YouTubeの音を消して(ミュート)埋め込んで自動再生する



で、こちらでつくったYouTubeの自動再生ページはこちらです。

http://xn--hhro09bn9j8uh.com/youtube1.html

See the Pen YouTube自動再生自動ループサンプル1 by mgd_es (@mgd_es) on CodePen.0

3つのYouTube動画が自動再生しています。このページhttp://xn--hhro09bn9j8uh.com/youtube1.html上の左は同じ動画の繰り返しではなく違う動画を連続して再生させています。
あ、一応言っておきますがモバイルは自動で再生はできません。他の要素のループとかは試していません。
それとYouTube動画の再生回数は自動再生の場合カウントされないようになっています。


いきなりこれをつくるのはしんどいのでとりあえずひとつのYouTube動画を自動再生、自動ループ、ミュートさせていきます。

まず基本形となるHTMLコードです。

See the Pen YouTube自動再生自動ループミュート2 by mgd_es (@mgd_es) on CodePen.0

ここから解説

<div id="player"></div>

これを<body>と</body>の間のどこかに記載します。その記載した所にYouTube動画が再生されるようになります。

IDが"player"となっていますがID自体はなんでも良いです。
ただしこの後の行にある
'player',
の所でplayerとしていますので、ここと同じ文字列にしてください。

次に

videoId: '0HO2RVW0f_E',

となっていますが、'0HO2RVW0f_E'がYouTubeのIDとなっています。


YouTubeのIDはアドレスでわかります。例えば

https://www.youtube.com/watch?v=0HO2RVW0f_E

の場合はwatch?v= からの文字列になります。


https://youtu.be/0HO2RVW0f_E

だったら youtu.be/以降の文字列。


場合によっては

https://www.youtube.com/watch?v=0HO2RVW0f_E&rel=0

のように&とか?とかついている場合がありますがその前までになります。



height: '180', width: '320',

となっている所は縦180ピクセル、横320ピクセルという事でYouTube動画はその大きさになります。


loop: 1,

ループするかどうかの設定です。これを1ではなく0にするとループしません。
1にするとループしますが、この場合次に再生するYouTube動画を指定します。


playlist: '0HO2RVW0f_E',

ここで次に再生するYouTube動画のIDを指定します。同じ動画を続けて再生したいので同じIDになっています。
違う動画にしたい場合は違うYouTube動画のIDにすればその動画と交互に再生し続けます。

続けて

controls: 1,
autoplay: 1,
showinfo: 0

となっていますが、
自動再生にするのでautoplayの所は1になります。0にすると手動で再生になります。

という感じですね。

ちょっとよくわかっていないので間違っていたらすみませんがミュートの指定は
event.target.mute();
で指定しているんだと思います。



次は同じYouTube動画の連続再生ではなく、複数のYouTube動画を連続再生させてみます。

下の「Result」ボタンをクリックしてみると実際の動きがわかります。

See the Pen YouTube自動再生自動ループミュート3 by mgd_es (@mgd_es) on CodePen.27115


playlist:の所を見るといっぱい何やら記載がありますが、YouTube動画のIDを並べています。

playlist: 'BtQyJtT1c7E,RiDdasVF1yY,7P6K8XGHz5Y,s5a9Omv7c-E,6C_CQIcu4Xc,gn1S4V-X2hs,HXK51KX66Fg,rV2sfIl77Xo,TuYIsT2oc1I,ZKyFmDwrGGo',


videoId: '0HO2RVW0f_E', のYouTube動画が再生された後に
playlist: 'BtQyJtT1c7E',このIDの'BtQyJtT1c7E'のYouTube動画が再生されてからvideoId: '0HO2RVW0f_E', に戻ってループします。


playlist: 'BtQyJtT1c7E,RiDdasVF1yY', にすると
BtQyJtT1c7E と RiDdasVF1yY のYouTube動画が連続で再生され、videoId: '0HO2RVW0f_E',に戻ってループ再生します。3本連続再生でループになります。


カンマで区切ってYouTubeの動画IDを入れていけばその分連続再生されます。



同じページに複数の自動再生自動ループミュートのYouTube動画を配置する場合ですが

最初に記載にしたこのページをよく見てみると
http://xn--hhro09bn9j8uh.com/youtube1.html

See the Pen YouTube自動再生自動ループサンプル1 by mgd_es (@mgd_es) on CodePen.0


ytPlayer = new YT.Player(
の行から

events: {
'onReady': onPlayerReady
}
}
);

の所までを繰り返して記載しているのがわかるかと思います。

それでその繰り返した部分をちょいちょいいじって別のものにしてしまえば良いわけです。


あと、
ytPlayer = new YT.Player(
'player', //

の、playerの部分はそれぞれ変更してください。

上の例では'player','player2','player3',となっています。


なので配置する時も
<div id="player"></div>
<div id="player2"></div>
<div id="player3"></div>

のようにします。


以上です。

コードをよく見ていただければとりあえずはわかるかと思います。


http://xn--hhro09bn9j8uh.com/youtube1.html

See the Pen YouTube自動再生自動ループサンプル1 by mgd_es (@mgd_es) on CodePen.0



-WordPress, YouTube

執筆者:


コメントを残す

関連記事

wordpress-logo-hoz-rgb

WordPressを使って1年以上経ったのでここらへんで何を使っているのか少し紹介

2011年10月からWordPressを使ってのブログ運営を開始しました。それまではココログを使っていました。 レンタルサーバーで動画素材.comのサイトを運営しはじめたので、だったらブログも移行しち ... 続きを読む

SyntaxHighlighter Evolvedでクリップボードにコピーアイコンが表示されていない時の対処方法(WordPress) Image.3

SyntaxHighlighter Evolvedで「クリップボードにコピー」アイコンが表示されていない時の対処方法(WordPress)

現在WordPressでブログをやっていますが、時々コードなりなんなりを表示させる時がありまして、 その時に使っているのが「SyntaxHighlighter Evolved」です。 SyntaxHi ... 続きを読む

動画素材123

YouTubeリンクで動画をループ再生させる方法(今の所OS X Safariのみで動作確認)追記あり

iPhoneやiPadでのムービーをループ再生する方法をブログに書いているのですが、 そのせいなのか時々「YouTube ループ」などの検索語句で来られる方がいらっしゃいます。 なので今回は YouT ... 続きを読む

動画素材123

マリオカート8のハイライト映像をYouTubeにアップする【Wii U】2017.06.02追記あり

Wii U のマリオカート8が発売されました。 追記 2017.06.02 Nintendo Switchのマリオカート8デラックスだとYouTubeにアップロードする機能は無いです。 ------- ... 続きを読む

WordPressの手動アップグレード方法

WordPressの手動アップグレード方法

WordPressの手動アップグレード方法を記しておきます。 ここ最近WordPressの自動アップグレードがうまくできなくなりました。 サーバーの問題なのかなんなのか。 なのでどうしても手動でやる事 ... 続きを読む

新刊「動画素材123+45 まるごとフリーでつかえるムービー素材集」


・大人気の動画素材集シリーズ第4弾は、過去2作品から選りすぐりの動画がフルハイビジョンで復活! 

新作も加えた〈123+45〉=〈168点〉、2層式DVD-ROM × 2枚組みの大ボリュームでお届けします!!12/17全国書店で発売です。商用利用にも使えます。


FHD動画素材123本収録「動画素材123FULL」 動画素材123FULL

動画素材123FULL
まるごとFREEでつかえるムービー素材集










2017年6月
« 5月    
 123
45678910
11121314151617
18192021222324
252627282930  



CLOSE
CLOSE