こんにちは、株式会社インスパイアの岩下です。

今回はタイトルの通り少し専門的な内容になります。

先日、制作サイトにYoutube iframeを入れた際に困った事があったので備忘録的に綴ります。

事の始まりはこんな相談から

「サイトにYoutubeの動画を挿入してYoutubeにはリンクしないようにしたい」

とのこと

ただ、そうはいっても数年前からYoutubeではiframeからYoutubeにリンクしている

タイトルや「共有」ボタンは非表示できない設定になっているので

色々いじるよりはYoutubeを使わず他の動画アップロードサイトを利用したほうが早いはず

しかし、今回は既にYoutubeチャンネルを解説していて複数UP済みな上にYoutubeでのup方法に慣れているため

他のアップロード方法は極力避けたいとのこと。。。

結局Youtube iframeを使用しiframeからYoutubeには飛べないようにすることに。

結論、最終的にはiframeの直後に<button>を記述し、positionとz-indexを使いiframeの幅いっぱいに透明のボタンを配置しました。

◯HTML

<div class="movie_box"><iframe src="アイフレームのソース?enablejsapi=1&controls=0&modestbranding=1" id="childIframe1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><div class="yt_btn"><button id="play<?php echo $wp_query->current_post + 1; ?>"></button></div></div>

◯JavaScript

// API読み込みvar tag = document.createElement('script');tag.src = "https://www.youtube.com/iframe_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);// API読み込み後にプレーヤーの設定var movieQuant = $('.movie_block').length;for (var i=1; i<10; i++) {    eval("var player" + i + "=" + i + ";");}    function onYouTubeIframeAPIReady() {        player1 = new YT.Player('childIframe1');    }document.getElementById('play1').addEventListener('click', function() {    if(player1.getPlayerState() === YT.PlayerState.PLAYING){        player1.pauseVideo();    } else {         player1.playVideo();     }})

iframe1つの表示であれば話は簡単だったのですが

1ページに複数のiframeを表示させるため、再生ボタンとiframeを紐付けるのが若干面倒でした。

また、調べても「再生ボタン」「停止ボタン」の設置は導入例が多くあるのですが1つのボタンで再生と停止を賄う記述があまりなく

実装中エラーが出たりなど大変でした。

とはいえYoutubeの利用規約に「同時に複数の動画iframeを設置する」ことは規約違反となっているため

サイトの使用を変更し1ページに１iframeを入れる形に変更し無事に実装。

上記のjsに+して再生ボタンを押した時、他の再生中の動画を停止するコードを追加すれば１ページに複数設置しても大丈夫だそうです。

今まで単純にYoutube動画をiframeで入れることはあったのですが

APIを使用し再生ボタンを設置するなどは初めての経験でYoutubeの仕様とにらめっこしながらの作業だったので

なかなか刺激的でした。