サイトのトップページに最新のYouTube動画を埋め込んでみた

教室紹介ページに、教室のYouTubeチャンネルの最新動画を埋め込みました。
YouTubeの埋め込みコードを使用し、CSSで表示を大きく調整しました。
iframeタグのallow属性で、埋め込まれた動画に付与する機能を指定しています。

1. 教室紹介ページへの最新YouTube動画の埋め込み

教室に興味を持った人に、どのような教室なのかを知ってもらうために、YouTubeを活用するのが良いと考えました。

そこで教室を紹介するトップページに、最新のYouTube動画を表示できるようにしました。

現在、教室のYouTubeチャンネルを運営しており、無理なく継続できるようになってきました。

目次に戻る

2. YouTube再生リストの埋め込みコード（iframe）

YouTubeの埋め込みコードを使って、再生リストの1番目の動画を表示できるようにしました。

再生リストの「共有」から埋め込みコードを取得します。

以下のコードを固定ページのカスタムHTMLブロックに入れました。

<style>
iframe.youtube-16-9 {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(93, 89, 75, .5);
}
.video-container {
    max-width: 100%;
}
</style>

<iframe class="youtube-16-9" src="https://www.youtube.com/embed/videoseries?si=Ij97sZTT3v_wi_pa&amp;list=PLPL4Sres_or65H74LxNPg6bU00Niwc8o3" 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>

目次に戻る

2-1. 動画の表示幅の最適化（style）

当初、動画の表示幅が少し狭かったため、CSSを調整して画面の横幅100%で表示されるように工夫しました¹。

<style>
iframe.youtube-16-9 {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(93, 89, 75, .5);
}
.video-container {
    max-width: 100%;
}
</style>

目次に戻る

2-2. iframeのallow属性の意味

iframeタグのallow属性は、埋め込まれたコンテンツ（この場合はYouTube動画）に付与する機能を指定するために使われています。
allow属性の値は、スペースで区切られた機能名のリストです。

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

属性名	説明
accelerometer	加速度センサーへのアクセスを許可します。
autoplay	動画の自動再生を許可します。ただし、多くのブラウザのユーザー設定では自動再生が制限されていることがよいです。
clipboard-write	動画プレーヤーがクリップボードにデータをコピーできるようになります。
encrypted-media	暗号化されたメディアの再生を許可します。 DRMで保護されたコンテンツの再生に必要です。
gyroscope	ジャイロスコープへのアクセスを許可します。
picture-in-picture	ピクチャーインピクチャー機能の使用を許可します。ユーザーは動画を小さなウィンドウで再生しながら、他のコンテンツをブラウズできます。
web-share	Web Share APIの使用を許可します。これにより、ユーザーは動画を他のアプリやサービスに直接共有できます。

目次に戻る

3. YouTubeのいろんなURL

ほんとは、「ちいラボラジオ」の再生チャンネルではなく、「ちいラボチャンネル」そのもののリストを元に最新動画を表示しようと考えていました。

YouTubeのチャンネルにまつわるURLはいろいろあります。

YouTubeチャンネルのハンドルは「@chiilabo」ですが、
チャンネルIDは、「UCmxiAMzMsEnN6m_1seVpiMA」²。

YouTubeチャンネルの最新動画を埋め込むには、チャンネルIDの「UC〜」の部分を「UU〜」に変更して埋め込みコードを作成すればよいそうです³。

https://www.youtube.com/embed/?list=UU〜

ちいラボのIDは、「mxiAMzMsEnN6m_1seVpiMA」なので

https://www.youtube.com/embed/?list=UUmxiAMzMsEnN6m_1seVpiMA/

しかし、なぜかうまくいかず。

チャンネルのハンドル
https://www.youtube.com/@chiilabo
チャンネルのID
https://www.youtube.com/channel/UCmxiAMzMsEnN6m_1seVpiMA/
チャンネルのリスト（？）
https://www.youtube.com/embed/?list=UUmxiAMzMsEnN6m_1seVpiMA/
ちいラボラジオの再生リスト
https://www.youtube.com/playlist?list=PLPL4Sres_or65H74LxNPg6bU00Niwc8o3

こちらもどうぞ。

YouTubeの「ハンドル」とは？【チャンネル固有名】

YouTubeチャンネルにも「ハンドル」という「@で始まるチャンネル固有名」を決められるようになりました。これは、YouTubeのユーザー同士（チャンネル同士）のやり取りをしやすくする機能です。チャンネルURLが探しやすくなるだけでなく、InstagramやTwitterのように、タイトルやコメントでの「タグ付け」で使うことができます。YouTubeチャンネルを運営しているなら、わかりやすいハンドルを設定すると、告知しやすくなります。反対に、YouTubeは視聴するだけという...

YouTubeで「保存」した動画を見るには？【動画の保存先と再生リスト】

YouTubeの動画再生画面にある「保存」ボタンは、動画を端末にダウンロードするのではなく、「後で見る」というリストに追加する機能です。「後で見る」リストに登録した動画は、YouTubeアプリの「ライブラリ」から確認・視聴できます。動画データを端末にダウンロードする「オフライン」は、YouTube Premiumの有料機能です。動画ファイルを自由にダウンロードできたらいいのに……。それには、コピーライトなどの問題がありますからね。YouTubeアプリの「保存」は、以前は「追加...

YouTubeにある動画をLINEで送るには？（リンク共有）

基本的には、YouTubeにある動画はスマホ本体に保存できないので、リンクを共有してLINEに送ります。メッセージに送ったリンクを相手が押すと、YouTubeにアクセスして動画が見られます。インターネット上の動画を閲覧するので、接続にはデータ通信量が必要です。YouTubeにある動画をLINEに移せない？YouTubeにある動画をラインに移そうとしましたが、うまく出来ませんでした。可能であればラインに移す方法（android利用）、もしくは動画そのものを送付していただくことは...

[Edge] 見ているYouTube動画を要約できる（Copilot）

パソコンのウェブブラウザはどんどん進化しています。Microsoft Edge には、「Copilot（コパイロット）」という「生成AI」機能が追加されました。EdgeのCopilotを使うと、今見ている動画やページについて「ビデオの要約を生成」したり、「ページの概要を生成する」ことができます。Copilotで「ビデオの要約を生成」Copilotでは、表示しているYouTube動画を文章で要約することができます。Edgeで動画を表示している状態で画面右上の Copilotボタ...

試しに YouTubeチャンネルにメンバーシップを設定してみた

YouTubeチャンネルの登録者が 1000人を超えたところで、「収益化」ができるようになりました。その一つに「メンバーシップ」がありました。価格と内容を決めて申請すると、審査が完了するとできるようになります。試しに、月490円でコメントの優先返信、というほとんど特典の薄いプランを設定してみました。【メンバーに加入して応援する！】 @chiilabo 「ちいラボ友の会（¥490/月）」は、ちいラボのスポンサーとして活動を応援するメンバーシップです。特典は、コメントへの優...

（参考）

WebサイトにYouTubeチャンネルの最新動画を常に表示して埋め込む方法 | uzurea.net

（補足）

目次に戻る

QRコードを読み込むと、関連記事を確認できます。