• 基本的な埋め込み（iframe）
• 埋め込みオプションのカスタマイズ
• レスポンシブ対応の埋め込み
• iframeを使わない埋め込み方法
• YouTube APIを使った埋め込み

基本的な埋め込み（iframe）

YouTubeの動画をHTMLに埋め込む最も簡単な方法は、<iframe>タグを使う方法です。

埋め込みコードはYouTubeの動画ページで「共有」→「埋め込む」から取得できます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>

例えば、次のように記述すると動画が表示されます。

埋め込みオプションのカスタマイズ

埋め込み動画のURLにパラメータを追加すると、さまざまなカスタマイズができます。

自動再生（autoplay）

動画を自動で再生したい場合、URLの末尾に?autoplay=1を追加します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID?autoplay=1" frameborder="0" allowfullscreen></iframe>

ループ再生（loop）

ループ再生を有効にするには、loop=1とplaylist=動画IDを追加します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID?loop=1&playlist=動画ID" frameborder="0" allowfullscreen></iframe>

ミュート再生（mute）

ミュートで動画を再生する場合は、mute=1を追加します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID?mute=1" frameborder="0" allowfullscreen></iframe>

関連動画を非表示

再生終了後に関連動画を表示しないようにするには、rel=0を追加します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID?rel=0" frameborder="0" allowfullscreen></iframe>

レスポンシブ対応の埋め込み

スマートフォンやタブレットでも綺麗に表示されるようにするには、<div>を使ってpadding-bottomを調整する方法が一般的です。

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe src="https://www.youtube.com/embed/動画ID" 
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
        frameborder="0" allowfullscreen>
    </iframe>
</div>

これにより、どの画面サイズでも動画のアスペクト比（16:9）を維持できます。

iframeを使わない埋め込み方法

JavaScriptを使用して、iframeを使わずにYouTube動画を埋め込むことも可能です。

<div id="video-container"></div>

<script>
    var videoId = "動画ID";
    var container = document.getElementById("video-container");
    var videoElement = document.createElement("video");
    videoElement.src = "https://www.youtube.com/embed/" + videoId;
    videoElement.controls = true;
    container.appendChild(videoElement);
</script>

この方法はブラウザによって動作しない場合がありますが、特定の要件に応じて活用できます。

YouTube APIを使った埋め込み

YouTube Player APIを利用すると、動画の再生や一時停止、音量調整などをJavaScriptで制御できます。

基本的なAPIの利用

まず、YouTube APIを読み込みます。

<script src="https://www.youtube.com/iframe_api"></script>

次に、動画プレイヤーを初期化するスクリプトを追加します。

<div id="player"></div>

<script>
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '315',
            width: '560',
            videoId: '動画ID',
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }
</script>

この方法を使うと、JavaScriptで動画を操作できるようになります。

APIを使った動画操作

例えば、次のようにボタンを追加して動画を再生・停止できます。

<button onclick="player.playVideo()">再生</button>
<button onclick="player.pauseVideo()">一時停止</button>
<button onclick="player.stopVideo()">停止</button>

このように、YouTube APIを利用すると、より柔軟な動画コントロールが可能になります。