jQuery

【API】メインビジュアルの背景にYouTube動画を埋め込む方法

以前に、動画を使ったヒーローヘッダーの作り方を解説しました。

【コピペ】背景に動画を使ったヒーローヘッダーの実装ヘッダーパターンについて研究しています。 今回は、背景に動画を使ったヒーローヘッダーの実装についてまとめてみたいと思います。 ...

 

今回は、メインビジュアルの背景にYouTube動画を埋め込む方法を解説していきます。

結論から言うと、YouTube Player APIを使います。

 

メインビジュアルの背景にYouTube動画を埋め込む

See the Pen
YouTube動画を背景いっぱいに広げて埋め込み
by kei (@kei_01011)
on CodePen.

全画面表示で確認してください。

 

HTMLマークアップ

<div id="video-background"></div>
<div id="video-overlay">
  <h1>ここにキャッチコピー</h1>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 

HTMLはjQueryの読み込みと、動画を表示する部分のマークアップです。

 

CSSスタイリング

 

#video-background,
#video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  display: flex;
  align-items:center;
  justify-content:flex-end;
}
#video-overlay h1{
  font-size:56px;
  color:#fff;
  text-shadow:1px 3px 6px #777;
  margin-right:100px;
}


#video-background {
  z-index: -2;
}

#video-overlay {
  z-index: -1;
}

 

動画を操作できないようにするため、z-indexで#video-overlayを#video-backgroundの上に重ねてあります。

 

#video-overlayに対して「background: rgba(0,0,0,0.3);」のような値を追加すれば、動画の上に半透明のレイヤーを重ねることができます。

 

JavaScript YouTube Player APIの読み込み

// YouTube Player APIの読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
// プレイヤーを埋め込む場所(IDを指定)
var ytArea = 'video-background';
// 埋め込むYouTube動画のID
var ytID = 'DSVBu1tdUEg'; // https://youtu.be/〇〇〇の〇〇〇
 
// プレイヤーの埋め込み
function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player(ytArea, {
    videoId: ytID,
    playerVars: {
      rel: 0, // 関連動画の非表示
      controls: 0, // プレイヤーコントロールの非表示
      showinfo: 0, // タイトルなどの非表示
      modestbranding: 1, // YouTubeロゴの非表示
      iv_load_policy: 3, // アノテーションの非表示
      wmode: 'transparent'
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
 
// 動画の準備完了後の動作
function onPlayerReady(e) {
  ytPlayer.playVideo();
  ytPlayer.mute();
  ytPlayer.setPlaybackQuality('default'); // 画質(small・medium・large・hd720・hd1080・highres・default)
}
 
// 動画再生中と再生後の動作
function onPlayerStateChange(e) {
  var ytStatus = e.target.getPlayerState();
  if (ytStatus == YT.PlayerState.PLAYING) { //再生中
  }
  if (ytStatus == YT.PlayerState.ENDED) { //再生後
    ytPlayer.playVideo();
    ytPlayer.mute();
  }
}
 
// 上下左右に出てくる黒帯を非表示
var WIN = $(window);
var WIN_H
var win_W
 
function yt_screen_retio(){
  WIN_H = WIN.height();
  WIN_W = WIN.width();
  var screen_switch = 0.5625;
  var screen_ratio = WIN_H / WIN_W;
  var ratio_H = WIN_H / screen_switch;
  var ratio_W = WIN_W * screen_switch;
 
  if(screen_ratio > screen_switch){
    $('#video-background').css({
      'height':'100%',
      'width':ratio_H,
      'margin-top':'0',
      'margin-left': -ratio_H /2,
      'left':'50%',
      'top':'0'
    });
  } else {
    $('#video-background').css({
      'width':'100%',
      'height':ratio_W,
      'margin-top': -ratio_W / 2,
      'margin-left':'0',
      'top':'50%',
      'left':'0'
    });
  }
}
 
WIN.resize(function () {
  yt_screen_retio();
});
 
$(function(){
  yt_screen_retio();
});

 

上記のJavaScript内の動画IDを書き換えるだけでOKです。

今回は、こちらの動画を拝借しました。

 

 

 

onYouTubeIframeAPIReady()関数

→関連動画やタイトル、コントロールなどを非表示

 

onPlayerReady(e)関数

→動画が準備できた時の動作

 

playVideo() → 動画の自動再生

mute() →無音

setPlaybackQuality() →動画の画質を指定

 

onPlayerStateChange(e)関数

→動画の再生中と再生後の挙動

 

yt_screen_retio()関数

→上下左右に現れる黒帯を非表示、ウィンドウサイズを画面いっぱいに

 

まとめ

コピペするだけで簡単に実装できます。

ただ、プラグインを使えば、様々なカスタマイズも可能になってくるので、シーンに合わせて試してみてもいいかもしれませんね。

 

試してみたいjQueryプラグイン