動画素材.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



投稿者プロフィール

ES... ( Molojun )
ES... ( Molojun )
もうだいぶ前からになりますがクラブVJをやっていました。 そこから映像関係のお仕事をやるようになり、コンサートや企業プレゼン、展示会などのムービーを創ったり、時にはプレゼンテーション素材をつくったりするようになりました。
今はPVなども制作したり動画素材を配布・販売したりしています。

■書籍も出しました【動画素材123+45】168本のFHD動画素材を収録しています。

◆もうちょっと詳しいプロフィールはこちらへどうぞ

▼動画素材.com 作者へのサポートをお願いいたします。
Amazonほしいものリスト

-WordPress, YouTube

執筆者:


コメントを残す

関連記事

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

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

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

YouTubeライブストリーム-ゲーム中継-をやってみる【Blackmagic Intensity Shuttle・OBS】02

YouTubeライブストリーミング(ゲーム実況)をやってみる【Blackmagic Intensity Shuttle・OBS】設定方法 Mac OS X

【Blackmagic Intensity Shuttle】と【OBS】を使ってWii UのゲームでYouTubeライブストリーム(ゲーム実況)をやってみたので 設定方法を忘備録として残しておきます。 ... 続きを読む

YouTubeへのリンクで画質指定する201502版10

YouTubeへのリンクで画質指定する。2015/02版

以前YouTubeへのリンクで画質指定する方法を書いておりましたが、 ・YouTubeリンクで画質指定する(高画質1080pとかに指定して再生) ここ最近YouTubeの仕様が変わってしまいこの方法が ... 続きを読む

wordpress%e3%81%ae%e8%a8%98%e4%ba%8b%e7%b7%a8%e9%9b%86%e3%81%a6%e3%82%99%e6%a4%9c%e7%b4%a2%e7%bd%ae%e6%8f%9b%e3%81%97%e3%81%9f%e3%81%84%e6%99%82%e3%81%ab%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%84%e3%82%8bch

WordPressの記事編集で検索置換したい時に使っているchrome拡張機能【Search and Replace】

WordPressの記事編集中にこの単語をこれに全部置き換えたいといった時に自分が使っているchrome拡張機能【Search and Replace】をご紹介します。 https://chrome. ... 続きを読む

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

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

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

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


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

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


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

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










2017年2月
« 1月  
 1234
567891011
12131415161718
19202122232425
262728 



CLOSE
CLOSE