ポートフォリオ備忘録 -youtubeリンクのリスト化-

youtube動画リストの横スクロール表示

目的

運営してるyoutubeチャンネルの動画をideogramを利用して生成した画像と同じ形式で表示したい。

実際のコード/html

<ul class="unordered_list_works">
 <li class="list_works">
  <iframe class="list_video" src="https://www.youtube.com/embed/wvYiptocu7Y?si=XT_0TL7uBx-qG3-r" 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>
 </li>
 <li class="list_works">
  <iframe class="list_video" src="https://www.youtube.com/embed/cgoPD0hqQbo?si=ACBob6hFiqmmnNR3" 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>
 </li>
 <li class="list_works">
  <iframe class="list_video" src="https://www.youtube.com/embed/047oSO2X2Kw?si=oipXFVD9UEbVyeKh" 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>
 </li>
</ul>

各行の説明/html

• <iframe>タグは、YouTube動画を埋め込むために使用されます。

• class="list_video"で、この<iframe>に特定のスタイルを適用します。

• src属性で、埋め込むYouTube動画のURLを指定します。

• title属性で、埋め込む動画のタイトルを指定します。これはアクセシビリティのために重要です。

• frameborder="0"で、フレームの境界線を非表示にします。

• allow属性で、動画の操作に関するさまざまな機能（例：自動再生、クリップボード書き込み、ピクチャ・イン・ピクチャなど）を許可します。

• referrerpolicy="strict-origin-when-cross-origin"で、外部リンクに対してリファラー情報を制御します。

• allowfullscreen属性で、動画の全画面表示を許可します。

実際のコード/css

.list_video {
  display: inline-block;
  width: 100%;

  aspect-ratio: 16/9;
  margin: 8px 16px 8px 0;
}

各行の解説（CSS）

• .list_video:

  • class="list_video"を持つすべての<iframe>に適用されるスタイルを定義します。

• display: inline-block;:

  • 要素をインラインブロック要素として表示します。インライン要素のように横並びに配置されますが、ブロック要素のように幅と高さを指定できます。

• width: 100%;:

  • 要素の幅を親要素の幅に合わせます。これにより、<iframe>は親要素(今回は.list_works)の幅いっぱいに表示されます。

• aspect-ratio: 16/9;:

  • 要素のアスペクト比（縦横比）を16:9に設定します。これにより、動画が正しい比率で表示されます。

• margin: 8px 16px 8px 0;:

  • 要素の外側にマージンを設定します。

    • 8px: 上側のマージン

    • 16px: 右側のマージン

    • 8px: 下側のマージン

    • 0: 左側のマージン

完成図