小粋空間  -  a cheap joke and a play on words site

YouTube動画にキャプションをつけてテキストを回り込ませる方法

YouTube動画にキャプションをつけてテキストを回り込ませる方法を紹介します。

１．はじめに

YouTube動画にキャプションをつけてテキストを回り込ませてほしいという依頼を受けました。

ネットで調べてみましたが、HTMLとCSSの設定方法の解説はみつからなかったので、自作してみました。

サンプル（クリックでページにジャンプ）

ということで、YouTube動画にキャプションをつけてテキストを回り込ませる方法を紹介します。

２．YouTube動画にキャプションをつけてテキストを回り込ませる

YouTube動画にキャプションをつけてテキストを回り込ませるには次のHTMLとCSSを用意します。

HTML

<figure class="left_youtube">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/AfPryxLJaVk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <figcaption>キャプション</figcaption>
</figure>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。こ>の文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この>文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>

CSS

figure.left_youtube {
    float: left;
    position: relative;
    margin: 5px 10px 50px 0;
    padding-bottom: 23%;
    width: 45%;
}
figure.left_youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
figcaption {
    text-align: center;
    position: relative;
    top: 180px;
}

CSSのポイントは下記の通りです。

• figureの下marginでキャプション分の余白を作る
• figcaptionのpositionプロパティをrelativeにしてtopで位置を決める