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

videoタグ

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

img_3142
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で親要素がクリックされたら、再生を開始するようにしてます。

これで下記のように!

img_3143

動作デモ

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

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

Writer

KO

誕生日に会社のみんなから『世界文学全集』をプレゼントしてもらった読書好きフロントエンド・エンジニアです。WordPressとMovableTypeが得意ですが、本当の特技は薪割りです。

Contact

ご提案依頼、ご相談、お見積もりなど
お気軽にお問合わせください。

03-6403-3259

平日 10:00~19:00

「Web制作について」とお伝え頂ければ
担当者に取次させていただきます。

Mailform

contact@trym.jp
でも受け付けております。