videoタグにiPhoneで勝手につく再生ボタンを消す方法|Blog|株式会社トライム
videoタグにiPhoneで勝手につく再生ボタンを消す方法
2016.10.18
![記事サムネイル](https://contents.try-m.co.jp/wp-content/uploads/2016/10/161018.jpg)
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で確認してみて下さい。
Contact
お問い合わせ
トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。
03-6403-3259
受付:10:00 - 19:00
![ロゴ](/wp-content/themes/trym/images/top/contact-logo.png)