こんにちは。

佐藤です。

 

 

 

 

 

よく企業のホームページなんかでTOPページに動画が表示されてたりしますよね。

 

 

 

今日はそんな感じの表示をYoutubeの動画を使ってYoutubeだとばれにくいように

 

動画を画面いっぱいに再生させる方法をご紹介します。

 

もちろん応用すれば好きなサイズで表示させられます。

 

 

完成品はこんな感じです。

 

 

 

 

 

 

 

 

というわけでまずはHTMLから

 

<div class="top-movie-box">
  <div id="cover" class="movie-cover">
    <div id="movie"></div>
  </div>
</div>

 

お次にjavascript。

スクリプトタグで記述していますのでそのままhtmlと一緒に貼り付ければ大丈夫です。
※jQueryは今回は使いません。

<script>
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubeIframeAPIReady() {
    var movieId = 'ApToyQwHLhk';//youtubeの動画のID。再生したい動画のIDを入力。
    player = new YT.Player('movie', {
      /*
      playerVarsで細かい設定ができます。
      コメントはどんな設定をしているか書いているだけです。
      */
      playerVars:{
        playsinline: 1,
        autoplay: 1, // 自動再生
        loop: 1, // ループ有効
        listType: 'playlist', //リスト再生（ループ再生に必要）
        playlist: movieId, // 再生する動画リスト（ループ再生に必要）
        controls: 0, // コントロールバー非表示
        enablejsapi: 1, //JavaScript API 有効
        modestbranding:1,//yutubeロゴの非表示
        iv_load_policy: 3, //動画アノテーションを表示しない
        disablekb:1, //キーボード操作OFF
        showinfo:0, //動画の再生が始まる前に動画のタイトルなどの情報を表示しない
        rel:0, //再生終了時に関連動画を表示しない
      },
      videoId:  movieId,
      events: {
        'onReady': onPlayerReady,//動画の準備ができたらonPlayerReadyを実行
        'onStateChange': onPlayerStateChange,
      }
    });
  }
  function onPlayerReady(e) {
    e.target.mute();//音声ミュート
    e.target.playVideo();//動画スタート（SP用）
  }
  function onPlayerStateChange(e){
    if(e.data == 1){
      document.getElementById('cover').style.opacity = 1;//動画の再生が始まったら表示
    }
  }
</script>

 

 

とりあえずここまで入力すると動画が再生されます。

動画IDは再生したい動画のIDを設定してください。

（例にのせているIDのままでも問題ありませんが）

 

 

 

例にのせているIDでは角屋のアジフライを使った料理番組

「アジフライな時間」が再生されます。

 

 

とっても美味しそうですので

お腹空いている人は気をつけましょう。

 

 

ちなみに「アジフライな時間」で使われている角屋のアジフライはこちらで購入できます。

 

 

 

 

 

さて、スタイルを適応していきましょう。

こちらがcssです。sassのSCSS記法で書いています。

 

html,body{
  height:100%;
}
body{
  .top-movie-box{
    height: 100%;
    position: relative;
    z-index: 0;
    overflow: hidden;
    .movie-cover{
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 0.5s;
      &:before{
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }
      #movie{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: -1;
      }
    }
  }
}

 

これでcssはばっちりです。

 

でもこのままでは枠に収まるサイズに調整されるため画面いっぱいにはなりません。

このあたりのサイズ調整はjavascriptでやっていきます。

こちらもscriptタグで記入しているのでHTMLと一緒に直接貼り付ければ大丈夫です。

まとめてコピーしたい場合はこちらからまとめてコピーしましょう。

 

<script>
  
  /*動画のアスペクト比が16:9以外の時はmovie_reSizeの第二引数で指定してください。*/
  movie_reSize('cover');
  window.onload = function(){
    movie_reSize('cover');
  };
  window.onresize = function(){
    movie_reSize('cover');
  }
  /*
  * target  → (string) 合わせる要素のIDを指定
  * size     → (string)動画の比率を指定、初期値'16:9'
  */
  function movie_reSize(target,size){
    if(typeof size === 'undefined'){
      size = '16:9';
    }
    sizeArray = size.split(':');
    sizeArray[0] = Number(sizeArray[0]);
    sizeArray[1] = Number(sizeArray[1]);
    if(!target ||  sizeArray[0] == 'NaN' || sizeArray[1] == 'NaN'){
      console.log('値が正しくありません。');
      return false;
    }else{
    var $cover = document.getElementById(target),
        $movieContent = document.getElementById('movie'),
        coverWidth = $cover.getBoundingClientRect().width,
        coverHeight = $cover.getBoundingClientRect().height,
        tatehi = coverHeight / sizeArray[1],
        yokohi = coverWidth / sizeArray[0],ansWidth,ansHeight;
    
    if(tatehi>yokohi){
      ansHeight = coverHeight;
      ansWidth = tatehi * sizeArray[0];
    }else{
      ansWidth = coverWidth;
      ansHeight = yokohi * sizeArray[1];
    }
    
    
    $movieContent.style.width = ansWidth+'px';
    $movieContent.style.height = ansHeight+160+'px';//160は投稿者情報などを消すために着けています。表示させたい場合は+160を消去してください。
    }
  }
</script>

 

 

ただ、こちら一点注意事項があります。

それは動画のアスペクト比です。

デフォルトでは16:9にしていますのでそれ以外の比率の場合は

movie_resize()の第二引数で文字列として渡してください。
※例：movie_resize(‘cover’,’4:3′);

 

 

 

以上で設定完了です。

 

基本的にcoverのサイズに合わせる形になりますので、指定の幅にしたい場合はcssでその辺りを修正すれば簡単に実装可能です。