iframeのsrcにenablejsapi=1というパラメーターを付与すると、JSでコントロールできるようになる。
<iframe id="youtube" src="https://www.YouTube.com/embed/●●●●●●●?enablejsapi=1" allowfullscreen="allowfullscreen"></iframe>
<button id="button">Start</button>
<script>
document.querySelector('#button').addEventListener('click', function() {
const $youtube = $('#youtube')[0].contentWindow;
$youtube.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});
</script>https://developers.google.com/youtube/player_parameters?hl=ja
他によく使われるパラメーターには下記のようなものが存在する。
- rel=0：関連動画が自分のチャンネルの動画のみとなる
- playsinline=1：インライン再生
- loop=1：ループ再生
- autoplay=1：自動再生
- controles=0：コントロールを非表示