iframeで埋め込んだYouTube動画の再生マークを消す方法は、動画の上にカバー要素を重ねて隠し、JavaScript（ジャバスクリプト：Webページに動きをつけるプログラミング言語）で再生を制御するのが結論です。厳密には赤い再生ボタンそのものを削除することはできませんが、サムネイル画像や好みのデザインを上に被せることで、サイトの雰囲気に合った見た目を実現できます。この記事では、初心者の方でも実装できるように、URLパラメータの設定からカバー要素の作り方、再生ボタンをクリックしたときの動作まで、順を追って丁寧に解説します。
YouTube動画の再生マークは「消す」のではなく「隠す」
まず前提として、YouTubeの埋め込み動画に表示される赤い再生マークを直接消すことはできません。iframe（アイフレーム：外部ページを埋め込む枠）の中身はYouTube側が管理しているため、CSSやJavaScriptで内部のボタンを操作することができないからです。そのため、この記事で紹介する方法は「動画の上に別の要素を重ねて再生マークを見えなくする」というアプローチになります。
カバー要素を重ねると、ユーザーがそのまま動画をクリックしても再生されません。そこで、JavaScriptを使ってカバーがクリックされたら動画を再生する、という仕組みをあわせて用意します。これにより、見た目はオリジナルのデザインを保ちつつ、動画としての機能もきちんと動くようになります。
この手法を使えば、自社サイトのブランドカラーに合わせた再生ボタンにしたり、動画のサムネイル画像をきれいに表示したりと、デザインの自由度が大きく広がります。
手順1：URLに「?enablejsapi=1」を設定する
最初のステップは、埋め込みURLの末尾に「?enablejsapi=1」を追加することです。このパラメータを付けることで、JavaScriptからYouTube動画を操作できるようになります。これがないと後半の再生制御が効かないため、必ず設定してください。
YouTubeの「共有」から取得した埋め込みコードのURL部分を、次のように書き換えます。動画IDの後ろにパラメータを付け加えるだけです。
<div class="box"> <div class="box__cover"></div> <iframe src="https://www.youtube.com/embed/動画ID?enablejsapi=1" frameborder="0" allow="autoplay"> </iframe></div>ポイントは、iframeを親要素の「.box」で囲み、その中にカバー用の「.box__cover」を用意しておくことです。このカバー要素が、後で再生マークを隠す役割を果たします。なお、CodePen（コードペン：コードを試せるオンライン環境）などのテスト環境では、自動再生を許可するために「&mute=1」を追加する必要がある場合があります。本番環境では不要なことも多いので、動作を見ながら調整してください。
手順2：動画の上にカバー要素を重ねる
次に、CSSでカバー要素を動画の上にぴったり重ねます。ここでは「position: absolute（絶対配置）」を使い、親要素いっぱいにカバーを広げるのが基本です。カバーを重ねることで、YouTubeの再生マークが視覚的に隠れます。
.box { position: relative; width: 100%; aspect-ratio: 16 / 9;}.box__cover { position: absolute; inset: 0; z-index: 1; cursor: pointer; background: #000;}.box__cover::before { content: "▶ 動画を再生する"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff;}.box iframe { width: 100%; height: 100%;}親要素に「position: relative」を指定し、カバーに「position: absolute」と「inset: 0」を設定することで、動画の四辺にカバーが密着します。「z-index: 1」でカバーを前面に出し、「::before（ビフォー：疑似要素）」を使って「動画を再生する」というテキストや独自のボタンデザインを表示できます。ここを工夫すれば、サイトのデザインに合わせた再生ボタンが自由に作れます。
手順3：JavaScriptで再生をコントロールする
最後に、カバーをクリックしたら動画が再生されるようJavaScriptを設定します。ここでは「postMessage（ポストメッセージ：iframeへ命令を送る仕組み）」を使い、YouTube側へ再生命令を送ります。手順1で「?enablejsapi=1」を設定していれば、この命令が届いて動画が動き出します。
const cover = document.querySelector(".box__cover");const iframe = document.querySelector(".box iframe");cover.addEventListener("click", () => { iframe.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', "*" ); cover.style.display = "none";});この処理では、カバーがクリックされたら再生命令を送り、同時にカバーを「display: none」で非表示にしています。これでカバーが消え、通常のYouTube動画として再生が始まります。テキストや画像のカバーが、クリック後には本来の動画に切り替わるという自然な動きになります。
なお、サムネイル画像を使う場合は、著作権の観点から自分が権利を持つ動画のサムネイルを使うのが安心です。他社の動画を扱う際は、YouTubeが自動生成するサムネイル画像URLを利用するとよいでしょう。
デザインのパターン別カスタマイズ例
カバー要素を使う方法の魅力は、デザインの自由度が高いことです。大きく分けて「サムネイル画像を表示するパターン」と「再生マークだけを変更するパターン」の2つがあり、目的に応じて使い分けられます。
- サムネイル画像を表示する：カバーの背景に動画の内容がわかる画像を設定し、その上に独自の再生ボタンを重ねる方法です。クリック前から動画の魅力が伝わり、再生率アップが期待できます。
- 再生マークを変更する：赤い標準ボタンではなく、丸型・三角型など好みの形や、ブランドカラーに合わせた色の再生ボタンをCSSで作る方法です。サイト全体のトーンを統一したいときに有効です。
どちらも基本の仕組みは同じで、カバー要素の中身（背景画像や疑似要素のデザイン）を変えるだけで実現できます。まずは基本形を作り、そこからデザインを調整していくのがおすすめです。
よくある質問（FAQ）
Q1. 再生マークを完全に削除することはできますか？
いいえ、iframe内部はYouTube側が管理しているため、赤い再生マークそのものを削除することはできません。この記事の方法は、上からカバー要素を重ねて「見えなくする」やり方です。見た目上は自由にカスタマイズできるので、実用上は問題ありません。
Q2. 「?enablejsapi=1」を付けないとどうなりますか？
このパラメータがないと、JavaScriptからの再生命令がYouTubeに届かず、カバーをクリックしても動画が再生されません。カバーで再生マークを隠す場合は、必ずURLに設定してください。
Q3. サムネイル画像は他人の動画でも自由に使えますか？
著作権に配慮し、基本的には自分が権利を持つ動画のサムネイルを使うのが安心です。どうしても他社の動画を扱う場合は、YouTubeが提供する自動生成サムネイルのURLを利用する方法があります。商用サイトでは特に慎重に判断しましょう。
まとめ
iframeで埋め込んだYouTube動画の再生マークは、直接消すことはできませんが、カバー要素を重ねてJavaScriptで再生を制御することで、サイトの雰囲気に合ったデザインに変えられます。手順は、URLに「?enablejsapi=1」を設定し、CSSでカバーを重ね、クリックで再生する処理を書くという3ステップです。サムネイル表示や再生ボタンのカスタマイズなど、応用の幅も広がります。
「自社サイトの動画をもっと魅力的に見せたい」「デザインに合った実装をプロに任せたい」とお考えの方は、ぜひTHREE D PLUSにご相談ください。Web制作からコーディングまで、御社のブランドに合わせた最適なご提案をいたします。
