Web blog WEBブログ

サイトの埋め込み動画が自動再生されない場合の対応方法

2018.08.15

※この記事は2018年08月15日時点の情報をもとに作成されました。

コーダーの兼山です。

最新版の Chromeなど、サイトに音声付き動画が埋め込まれている場合に、自動再生されなくなったブラウザがあります。

埋め込み動画について、自動再生(Auto)指定をしていても、
サイトの埋め込み動画が自動再生されない場合の対応方法をご紹介します。

iframe で Youtube 動画を埋め込んでいる場合

src に、“&mute=1” パラメータを追加します。
<iframe id=”Movie” name=”movie” title=”YouTube” src=”https://www.youtube.com/embed/(動画ID)&amp;showinfo=0&amp;rel=0&amp;modestbranding=1&mute=1&amp;wmode=transparent&(略)”></iframe>

videoタグで埋め込んでいる場合

video タグに、muted 属性を追加します。
<video muted src=”https://example.com/video/movie.mp4″ autoplay loop></video>

まとめ

今後、サイトへの埋め込み動画について、
自動再生に制限があるブラウザにも対応できるよう、事前に対策をしておくと良いと思います。

ご相談・カスタマイズご依頼

弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

この記事を読んだ方はこんな記事も読んでいます

こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…

こんにちは。コーダーの兼山です。 Webページのお問い合わせフォームなどで「私はロボットではありません」といった表示を見…

こんにちは。コーダーの兼山です。 最近、ブロック要素の境界を跨いだテキストを、ブロックに重なる部分、そうでない部分で異な…

無料相談窓口