jQuetyを使わずにYoutubeの動画を背景に設置する。

jQueryを一切使わずにYOUTUBEの動画をミュート状態で背景に敷く方法を書きました。

MontBlanc.です。

最近、動画を背景に敷いたWEBページを作成する機会があったのですが、jQueryのライブラリなどが何故か動かず代替として、jQuery不使用のものを使用することにしました。

ポイント

・背景全画面や一部に表示できたりする
・jQueryを使わない
・CSSなどである程度制御できる

準備するもの

YOUTUBE IFLAME PLAYER API

youtube公式のAPI

設置方法

YOUTUBE IFLAME PLAYER APIを読み込んで以下を設置。
より上に設置して問題なく動作しました。
Youtubeの共有画面で作成できるiframeでもCSSをちょちょいすれば、できないこともないのですが、その場合音声が再生されてしまうのですが、こちらでは、Javascript上でmuteの処理を行ってくれるので、無音状態を作ることが可能です。

<script src="https://www.youtube.com/iframe_api"></script>
<script>
 
	// YouTubeの埋め込み
	    function onYouTubeIframeAPIReady() {
	        ytPlayer = new YT.Player(
	            'youtube', // 埋め込む場所をIDで設定
	            {
	                videoId: '09R8_2nJtjg', // YouTubeのIDを指定
	                playerVars: {
	                    loop: 1,//0:ループしない 1:ループする 1の場合playlist設定必須
	                    playlist: '09R8_2nJtjg',//次に流すYoutubeのID
	                    controls: 0,//コントローラー無し
	                    autoplay: 1,//オートプレイ
	                    showinfo: 0//動画タイトルなど表示しない
	                },
	                events: {
	                    'onReady': onPlayerReady
	                }
	            }
	        );
	    }
	//プレイ準備完了後
	      function onPlayerReady(event) {
	        event.target.playVideo();
	        event.target.mute();
	      }
 
</script>

htmlは以下

 
<div id="youtube"></div>
 

背景をフルで表示する時は #youtube をCSSで成形していきます。

CSSで成形する際の注意

指定したIDの中にiframeを設置して表示しているようで、ブラウザはサイズによってはレターボックス(黒帯)が縦や横に入ったりするので、実際に使う時は再生状態を見ながら調整を行う必要あり。ただwidthとheightを100%にしてもキレーに全画面ならない(min〜とかmaxは必要かも)。

サンプルはCSSの事例はまた後ほど!b