DevNotes - YouTube

Embed in site

2022-04-11

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ | YouTube IFrame Player API | Google Developers

1.埋め込む動画・再生リストのページの "共有" から "埋め込む" を選択する。
開始位置を指定する場合は、"開始位置" のチェックをオンにして時間を入力する。
"プレーヤーのコントロールバーを表示する" と "プライバシー強化モードを有効にする" のチェックをオンにする。
"コピー" で iframeタグをコピーする。

2.html
div要素にステップ1の iframeタグを入れる。
width属性と height属性を削除する。

<div class="youtube-iframe">
    <iframe src="https://www.youtube-nocookie.com/embed/**videoID**" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

3.css


.youtube-iframe {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}
            
.youtube-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}