YouTubeの埋め込みの時のレスポンシブデザインCSSメモ

投稿日 : 2020/10/10 23:00:05

タグ : #salad's memo#CSS#旧ブログシステム

YouTubeの埋め込みって固定サイズですよね。
それをレスポンシブデザイン対応にする、小技のめも。

<div class="youtube">
    <iframe
        src="https://www.youtube.com/embed/yaUxNp-fn-A"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
</div>

.youtube {
    position: relative;
    width: 100%;
    max-width: 704px;
    max-height: 396px;
    padding-top: 56.25%;
    display: block;
    margin: 0 auto;
}
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

最大幅については、4:3、16:9のサイズ一覧 / phantom4 JavaScriptなどのフロントエンド開発メモを参考

実装結果

{{< youtube url="yaUxNp-fn-A" >}}

これはshortcodeを使って埋め込み実装をしています。
HUGOからSvelteKit + Newtのシステムに変更したため使用を終了しました。

HUGOでデザイン凝りたい？ならShortcode使おうぜ

につかいかたをのせています。ぜひそちらもごらんください