videoタグで埋め込んだ動画に自作再生ボタンをつける方法

今回は需要は少ないかもしれませんが、個人的にはたまに使うので
videoタグで張り付けた動画に自作の再生ボタンを付ける方法を記載しておこうと思います。
完成系だけ見たい！という方はコチラをご確認ください！

videoタグで埋め込んだ動画に自作ボタンを設置したデモ
まずはvideoタグで動画を再生する
再生ボタンのHTML/CSS/jQuery
完成系のHTML/CSS/jQueryはこちら
お問い合わせ・ご相談

videoタグで埋め込んだ動画に自作ボタンを設置したデモ

次の動画は自動再生なので、
ボタンは<PLAY（再生）>→<PAUSE（停止）>の順に切り替わります。
動画を自動再生しない場合はボタンの表示を逆にする必要があります。

STOP PLAY

まずはvideoタグで動画を再生する

まずは<video>タグで動画を再生する方法です。
動画の縦横比を維持してレスポンシブに対応するには、
もちろん<video>タグ自体にCSSで高さ指定をしても良いのですが、
個人的には次のようにCSSの指定するのが一番便利だと最近感じています。

HTMLはこちら

<div id="movie">
 <video src="movie.mp4" playsinline autoplay muted loop poster="sample.png"></video>
</div>

playsinline

video要素によって埋め込まれた映像をインライン(その映像が埋め込まれた場所)で再生する

iOSではplaysinlineを指定しないと自動再生されず、タッチすると全画面表示で再生されるので注意

autoplay

動画を自動再生したい場合に指定。動画読み込み完了後に自動再生が即時開始

autoplayが効かないときは、【muted】または【controls】を指定してみる

muted

動画の音を消音する場合は指定

loop

動画を繰り返し再生したい場合は指定

controls

再生・一時停止・再生位置の移動やボリュームなどのインターフェースを表示したい場合
（※今回は自作の再生ボタンを張り付けるので使用していません）

poster

動画が表示できない場合や動画の読み込み中などに画像を表示する場合に指定。サムネイルのような感じ。

CSSはこちら

#movie {
  width:100%;
  height:auto;
  position:relative;
}
#movie::before {
  display:block;
  content:'';
  width:100%;height:0;
  padding-top:56.25%; /* ※1)ココがアスペクト比（縦横比）*/
}
#movie video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;top:0;left:0;right:0;bottom:0;
}

※1)
/* ココが縦横比の部分 */ を動画の縦横比に合わせて指定します。
例えばYouTubeの標準アスペクト比（縦横比）は 16:9なので
計算方法は単純に9÷16=0.5625
さらに%で指示するので 0.5625×100=56.25% となるので
padding-top: 56.25%;と指定します。

★この方法は画像にも使えて便利です。
参考例）画像サイズ【縦】896px【横】1024pxの場合
896÷1024×100=87.5
→ padding-top:87.5%;

これでとりあえず動画の埋め込みは成功しているはずです。
次は再生ボタンを設置していきます。

再生ボタンのHTML/CSS/jQuery

再生ボタン自体はHTMLとCSSで設定するだけなので、複雑なところはないのですが、
今回はボタンクリックで【再生】→【停止】と切り替わってほしいので、
【再生ボタン】と【停止ボタン】をふたつ用意したうえで、クリックで切り替わるようにjQueryで処理します。

要は、jQueryでは以下の処理をするような感じです。
1.【再生ボタン】がクリックされたら【停止ボタン】を表示して【再生ボタン】を非表示に
2.【停止ボタン】がクリックされたら【再生ボタン】を表示して【停止ボタン】を非表示に

もっとスマートなやり方があったらすみません。。

video自作再生ボタンのHTML

再生アイコンと停止アイコンはそのままawesomefontを使用しています。画像でもOKです。

<div id="movie-button">
  <div class="movie-button">
   <span class="movie-button-pause"><i class="fas fa-pause-circle"></i>STOP</span><!--停止ボタン-->
   <span class="movie-button-play"><i class="fas fa-play-circle"></i>PLAY</span><!--再生ボタン-->
  </div>
 </div>

video自作再生ボタンのCSS

ボタンの装飾と位置指定をCSSで行います。

#movie-button {
  width:80px;height:80px;
  position:absolute;left:20px;bottom:40px;/*親要素に対する位置指定*/
  cursor:pointer;/*カーソルを指に変更*/
  z-index:1;
}
.movie-button {
  display:flex;justify-content:center;align-items:center;/*#video-buttonの中央に配置*/
}
.movie-button span {
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  color:#CF000F;font-size:1.2rem;
}
.movie-button span i {
  font-size:2.6vw;/*アイコンの大きさを指定*/
}

jQueryでvideoタグで挿入した動画上のボタン動作を指定

$(function(){
  $('.movie-button-pause').show();
  $('.movie-button-play').hide();
  $("#movie-button").click(function (){
    $('.movie-button').toggleClass('show');
    if($('video')[0].paused){
      $('video')[0].play();
      $(this).addClass('current');
    }else{
      $('video')[0].pause();
      $(this).removeClass('current');
    }
    if($('.movie-button').hasClass('show')){
      $('.movie-button-pause').hide();
      $('.movie-button-play').show();
    }else{
      $('.movie-button-pause').show();
      $('.movie-button-play').hide();
    }
  });
});

完成系のHTML/CSS/jQueryはこちら

videoで埋め込んだ動画に自作ボタンを設置する完成系はこちら
自動再生にしない場合はボタンを反対に★

/*HTML*/
<div id="movie">
 <video src="movie.mp4" playsinline autoplay muted loop poster="sample.png"></video>
 <div id="movie-button">
  <div class="movie-button">
   <span class="movie-button-pause"><i class="fas fa-pause-circle"></i>STOP</span><!--停止ボタン-->
   <span class="movie-button-play"><i class="fas fa-play-circle"></i>PLAY</span><!--再生ボタン-->
  </div>
 </div>
</div>

/*CSS*/
#movie {
  width:100%;
  height:auto;
  position:relative;
}
#movie::before {
  display:block;
  content:'';
  width:100%;height:0;
  padding-top:56.25%; /* ※1)ココがアスペクト比（縦横比）*/
}
#movie video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;top:0;left:0;right:0;bottom:0;
}
#movie-button {
  width:80px;height:80px;
  position:absolute;left:20px;bottom:40px;/*親要素に対する位置指定*/
  cursor:pointer;/*カーソルを指に変更*/
  z-index:1;
}
.movie-button {
  display:flex;justify-content:center;align-items:center;/*#video-buttonの中央に配置*/
}
.movie-button span {
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  color:#CF000F;font-size:1.2rem;
}
.movie-button span i {
  font-size:2.6vw;/*アイコンの大きさを指定*/
}

/*jQuery*/
$(function(){
  $('.movie-button-pause').show();
  $('.movie-button-play').hide();
  $("#movie-button").click(function (){
    $('.movie-button').toggleClass('show');
    if($('video')[0].paused){
      $('video')[0].play();
      $(this).addClass('current');
    }else{
      $('video')[0].pause();
      $(this).removeClass('current');
    }
    if($('.movie-button').hasClass('show')){
      $('.movie-button-pause').hide();
      $('.movie-button-play').show();
    }else{
      $('.movie-button-pause').show();
      $('.movie-button-play').hide();
    }
  });
});