videoタグにiPhoneで勝手につく再生ボタンを消す方法

• Web Create
• 2016.10.18

videoタグ

videoタグをiPhoneで表示させると下のように再生ボタンが追加されます。

poster属性で指定した画像に自分でデザインした再生ボタンがある場合、
これって邪魔になっちゃいますよね。

これを無理やり消す方法をご紹介します。

ソース

HTML

<div class="video stop fadeAlpha">
  <video id="video" poster="poster.jpg" src="video.mp4"></video>
</div>

CSS

@media screen and (max-width: 768px) {
  .video {
    width: 100%;
    height: 54.6vw; /*高さは動画によって調整して下さい*/
    background: url(poster.jpg) no-repeat;
    background-size: 100%;
  }
  video {
    width: 100%;
    display: none;
  }
}

JS

$(function(){
  $('.video').click(function() {
    vidplay();
  });

  function vidplay() {
    var $video = $('#player');
    var video = $video.get(0);
    $video.parent().toggleClass('stop')
    if (video.paused) {
      video.play();
    } else {
      video.pause();
    }
  }
});

解説

仕組みとしてはCSSでvideoタグを非表示にして、
その親要素に背景画像を指定しています。

さらにJSで親要素がクリックされたら、再生を開始するようにしてます。

これで下記のように！

動作デモ

iPhoneで確認してみて下さい。

See the Pen video by leo (@leo-trym) on CodePen.