【JavaScript】iframeで埋め込んだYouTube動画の再生マークを消す方法

RELEASE / 2024.4.29 UPDATE / 2024.04.22

JavaScript

YouTube

再生マーク

埋め込み動画

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

YouTubeの動画をサイトに埋め込むとYouTube特有の赤い再生マークが表示されてしまいます。
一目でYouTubeの動画だと分かりますが、サイトの雰囲気に合わない場合、消したいなと思うこともあるかもしれません。
この記事ではYouTube動画を埋め込んだ時、再生マークを消す方法をご紹介したいと思います。

この記事の目次を表示

1 実装サンプル
2 iframeで埋め込んだYouTube動画の再生マークを消す方法
- 2.1 【手順1】URLに?enablejsapi=1を設定する
- 2.2 【手順2】YouTube動画の上に画像を被せる
3 パターン別参考
- 3.1 【パターン1】サムネイル画像を表示する
- 3.2 【パターン2】再生マークを変更する
4 まとめ

実装サンプル

まずは実装サンプルを見てみましょう。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

codepenの環境の影響なのか、パラメータにmute=1を設定して無音状態にしないと再生しないようです。
実際に環境ではmute=1が無くても動作すると思います。

iframeで埋め込んだYouTube動画の再生マークを消す方法

iframeで埋め込んだYouTube動画の再生マークを消す方法ですが、先にお伝えすると厳密には再生マークを消すことは出来ません。
ただし、他の画像を上から被せることで隠すことは可能です。

【手順1】URLに?enablejsapi=1を設定する
【手順2】YouTube動画の上に他の要素を被せる
【手順3】JavaScriptでコントロールする

それでは順番に見ていきましょう。

【手順1】URLに?enablejsapi=1を設定する

まずはYouTubeで動画の埋め込みコードを取得します。取得した埋め込みコードはこのようになっています。

<iframe id="youtuebe" width="560" height="315" src="https://www.youtube.com/embed/動画ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

このコードの末尾に?enablejsapi=1を追加します。
このパラメータを追加することで、JavaScriptでYouTube動画を操作することが出来るようになります。

また合わせて<iframe>タグにid="youtube"を追加します。

JavaScriptでYouTube動画を操作する詳しい解説はこちらの記事でご紹介しています。

https://irodori-design-web.com/blog/blog-2661

YouTube動画の埋め込みコードの取得方法はこちらの記事でご紹介しています。

【2024年最新版】WEBサイトにYouTube動画を埋め込む方法

【手順2】YouTube動画の上に画像を被せる

取得した埋め込みコードの上に他の要素を被せるコードは作成します。

HTMLはこちら。

<div class="box">
    <div class="box__cover" id="play"></div>
    <iframe id="youtube" width="560" height="315" src="https://www.youtube.com/embed/動画ID?enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

CSSはこちら。

.box{
    width: 100%;
    position: relative;
}
.box__cover{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.box__cover::before{
    content: "動画を再生する";
    display: inline-block;
    padding: 25px;
    background: #000;
    color: #fff;
    font-weight: 700;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.box iframe{
    width: 100%;
}

.box__cover.hidden{
    display: none;
}

jsはこちら。

const youtubeWindow = document.getElementById("youtube").contentWindow;

// postMessageを送信する関数
function y_iframeController(action,arg=null){
    youtubeWindow.postMessage('{"event":"command", "func":"'+action+'", "args":'+arg+'}', '*');
};

// 「動画を再生する」を押した時のアクション
document.getElementById('play').addEventListener('click', function(){
    y_iframeController('playVideo');
    document.getElementById("play").classList.add('hidden');
});

実装サンプルを見てみましょう。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上のコードを記述することでこのようにYouTubeの再生マークを隠すことが出来ます。