さらいふ

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

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

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

warningこの記事は作成から一年以上が経過しています

最新のコードやバージョンに対応していない場合があります。ご了承ください。

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使おうぜ

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

さらだぼぉる

[非公式]滋賀県コロナまとめサイトをはじめとした滋賀情報ネットプロジェクトといった地域情報を発信する取り組みをしている。 2022年10月現在高校三年生で滋賀在住。 PythonやSvelteKitが最近のお気に入り。