埋め込み動画が自動再生されない場合の対応方法-Chrome・Firefox対応

Chrome バージョン66 ・Firefox バージョン66から自動再生される動画を無効化したそうです。
音声をミュートにすると自動再生するようなので対応方法をまとめました。

youtubeの場合

html

<div id="js-test-youtube"></div>
HTML

javascript

var tag = document.createElement('script');tag.src = "https://www.youtube.com/iframe_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);var youTubeId = 'XXXXXX'function onYouTubeIframeAPIReady() { ytPlayer = new YT.Player( 'js-test-youtube', { videoId: youTubeId, playerVars: { rel : 0, controls : 0, autoplay : 1, mute : 1, loop : 1, playlist : youTubeId, showinfo : 0 }, events: { 'onReady': onPlayerReady } } );}function onPlayerReady(event) { var player = event.target event.target.mute(); event.target.playVideo();}
JavaScript

videoタグの場合

html

<video muted autoplay loop> <source src="video/movie.mp4"></video>
HTML

read next