YouTube を Web サイトに埋め込むときのカスタマイズを4つ解説します。
結論から書くと、関連動画は「非表示」にはできません。IFrame Player API の rel: 0 で「同じチャンネルの動画だけに限定する」ところまでが仕様の上限です。角丸・黒枠線・再生ボタンはCSSとJavaScriptで対処できます。
この記事で扱う内容は次の4つです。
- YouTubeの関連動画を制限する
- YouTubeの枠を角丸にする
- YouTubeの黒枠線を見えないようにする
- YouTubeの再生ボタンを作る・設置する
仕事で実際に受けた依頼をもとにまとめたものです。2026年9月に、現在のパラメータ仕様と、CSSの書き方を今の書式に合わせて見直しました。
スポンサーリンク
YouTubeの関連動画を制限する
結論：関連動画を完全に消す機能はありません。rel パラメータで「同じチャンネルの動画に限定する」ことだけができます。
2018年9月まで、埋め込みタグに rel=0 を入れるだけで関連動画を非表示にできていました。しかし2018年10月以降の仕様変更で、rel の意味が変わりました。
▼relパラメータの現在の挙動
| 値 | 挙動 |
|---|---|
rel=1（既定） |
チャンネル外の動画も関連動画として表示される |
rel=0 |
再生した動画と同じチャンネルの動画だけが表示される |
この仕様は2026年9月現在も変わっていません。
制限ではなく非表示にしたい
結論：「同じチャンネルの動画だけを表示する」という仕様を逆手に取ります。チャンネルにアップする動画を1つだけにすれば、表示できる関連動画が存在しなくなり、結果として何も出ません。
サイト埋め込み専用のチャンネルを作り、そこに1本だけアップロードして rel: 0 を指定する、という手順になります。既存のチャンネルに動画が複数ある場合は使えない方法なので、埋め込み用に分けるのが前提です。
IFrame Player API とは
結論：IFrame Player API は、YouTube の動画を JavaScript から制御するための API です。静的な iframe タグを置くだけでは、任意のボタンから再生する、途中から再生するといった操作ができません。
このAPIを使うと、iframe タグを JavaScript で動的に生成し、再生・一時停止・シークをコードから呼べるようになります。関連動画の制限もここで指定します。
YouTubeの関連動画を制限するコード
コピペして、videoId を埋め込みたい動画のIDに変えれば動きます。
<div id="player"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
let player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: '640',
height: '360',
videoId: 'ここに動画ID',
playerVars: {
'rel': 0, // 関連動画を同じチャンネルに限定する
'playsinline': 1, // iOSでインライン再生する
'controls': 1, // プレーヤーのコントロールを表示する
'origin': location.origin
}
});
}
</script>実際に動く例がこちらです。
このチャンネルには動画が1つしかアップされていないため、一時停止中も再生後も関連動画は表示されません。
指定しておきたいパラメータ
結論：origin は必ず指定してください。API を有効にした埋め込みでは、これがセキュリティ上の保護になります。
▼よく使うplayerVars
| パラメータ | 効果 |
|---|---|
rel |
0で関連動画を同じチャンネルに限定する |
origin |
自サイトのオリジンを指定する。API利用時のセキュリティ対策 |
playsinline |
1でiOSのインライン再生を有効にする |
controls |
0でコントロールを隠す |
enablejsapi |
1でJavaScriptからの制御を許可する（APIでは自動で付く） |
modestbranding は使わないでください。YouTube ロゴを目立たなくするパラメータとして知られていましたが、2023年8月15日に非推奨となり、現在は指定しても効果がありません。古い解説記事にはまだ載っていることがあるので注意してください。
視聴者の Cookie を抑えたい場合は、埋め込み先を www.youtube-nocookie.com に変えるプライバシー強化モードもあります。静的な iframe で埋め込む場合は、loading="lazy" を付けておくと初期表示が軽くなります。
YouTubeの枠を角丸にする
結論：CSSで border-radius を指定するだけです。ただし iframe 自体に指定するより、ラッパー要素に指定して overflow: hidden で切り抜くほうが確実です。
まずシンプルな書き方がこちらです。
iframe {
border-radius: 16px;
}より確実なのが、ラッパーで切り抜く方法です。iframe の中身がはみ出さず、後述する黒枠線の問題も起きにくくなります。
<div class="yt-wrap">
<iframe src="..." title="動画のタイトル" allowfullscreen></iframe>
</div>.yt-wrap {
border-radius: 16px;
overflow: hidden;
/* 16:9 を保ったまま可変にする */
aspect-ratio: 16 / 9;
width: 100%;
}
.yt-wrap iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}aspect-ratio を使うと、以前必要だった padding-top: 56.25% の擬似要素を使う方法を書かずに済みます。主要ブラウザはすべて対応しています。
スポンサーリンク
YouTubeの黒枠線を見えないようにする
結論：角丸にしたとき、角の外側に1pxほどの黒い線が見えることがあります。埋め込まれた YouTube 側に background-color: #000; が設定されているためです。
この背景色は YouTube 側のドキュメントに設定されているもので、埋め込む側からは上書きできません。iframe の中身は別オリジンなので、こちらのCSSが届かないからです。
対処は2通りあります。
- ラッパーで切り抜く：前の見出しの
overflow: hiddenを使う方法。多くの場合これで消えます - 同色のボーダーを重ねる：動画と同じ大きさの要素を上に重ね、背景色やサムネイルの色に合わせたボーダーを引いて隠す
まず1を試して、それでも残る環境がある場合に2を使ってください。2の実装例がこちらです。
重ねる要素の色を、動画のサムネイルの色や周囲の背景色に合わせると、違和感なく隠せます。
YouTubeの再生ボタンを作る・設置する
結論：動画の上に要素を重ねると、その部分のクリックが YouTube 側に届かなくなり、再生ボタンが押せなくなります。重ねた要素自体を再生ボタンとして機能させることで解決します。
前の見出しでボーダーを重ねた場合に起きる問題です。重ねた要素がクリックを受け取ってしまうため、その下にある YouTube の再生ボタンに届きません。
対処は、重ねた透明な要素をクリックしたときに、IFrame Player API の playVideo() と pauseVideo() を呼ぶ形にすることです。
const overlay = document.querySelector('.yt-overlay');
overlay.addEventListener('click', () => {
const state = player.getPlayerState();
// 1 は再生中
if (state === YT.PlayerState.PLAYING) {
player.pauseVideo();
} else {
player.playVideo();
}
});重ねる要素の一部だけクリックを通したい場合は、CSSの pointer-events も使えます。装飾のためだけに重ねている要素なら、pointer-events: none を指定すればクリックが下へ抜けます。
.yt-overlay {
/* 装飾だけならクリックを下に通す */
pointer-events: none;
}実装例がこちらです。HTMLの6行目と50〜56行目が、YouTube のプレーヤーと連携させている部分です。
埋め込みカスタマイズで押さえておくこと
結論：YouTube の埋め込みは、こちらから触れる範囲が iframe の外側だけに限られます。中身の見た目を変えたい要求は、外側に要素を重ねて実現するしかありません。
この記事で扱った4つも、すべて「外側から何とかする」方法です。関連動画の非表示がチャンネル運用でしか実現できないのも、黒枠線を別要素で隠すしかないのも、同じ理由によります。
そのぶん、YouTube 側の仕様変更で挙動が変わることがあります。実際に rel は2018年に意味が変わり、modestbranding は2023年に無効化されました。納品後も動き続ける必要がある案件では、パラメータに依存した実装を最小限にしておくのが安全です。
スクロールに応じた演出と組み合わせる場合は、CSSやJavaScriptでスクロールに応じて色を変える方法もあわせてどうぞ。動画の背景色と連動させる実装で使えます。
CSSの書き方をまとめて学び直したい場合は、Webコーディングにオススメの学習本にHTML/CSS/JavaScriptの学習順をまとめています。
