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

投稿日:2020 10/10

タグ: #YouTube #CSS #Salad's Memo

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などのフロントエンド開発メモを参考

実装結果

これはshortcodeを使って埋め込み実装をしています。

HUGOでデザイン凝りたい?ならShortcode使おうぜのサムネイル

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

書いた人

さらだぼぉるの画像

さらだぼぉる

どこにでもいる男子高校生。[非公式]滋賀県コロナまとめサイトやTwitterBotなど滋賀県に関する情報を発信している。

Twitter(@saladbowl_dev)

おすすめ記事