コンテンツへスキップ
Share-Snippet-Code
  • ホーム
  • WordPress
  • JavaScript
  • CSS
  • コンソール
  • その他
  • ホーム
  • WordPress
  • JavaScript
  • CSS
  • コンソール
  • その他
  1. ホーム
  2. CSS
  3. レスポンシブなYouTubeの埋め込み

レスポンシブなYouTubeの埋め込み

2017年2月28日
CSS

html

<div class="iframeWrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/_iTJ4WHDhu4?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

scss

.iframeWrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
CSS

関連記事

  • Bootstrap v3 において特によく使いそうなコード
    2017年3月4日
  • Noto Sans Japaneseを利用する(cdn利用)
    2017年2月28日
  • Noto Fontをより軽いサブセットで利用する。 Noto Sans CJK JP サブセット
    2019年3月24日
  • WordPressで必要となるcssをscssで読み込む
    2017年3月1日
サイト内検索
カテゴリー
  • AI (1)
  • CSS (6)
  • Gridsome (3)
  • JavaScript (7)
  • Shopify (1)
  • SNS (1)
  • Testノウハウ (4)
  • WooCommerce (7)
  • WordPress (82)
  • コンソール (23)
  • その他 (10)
タグ
amp backstop.js BlockEditor bootstrap chart GDPR Gutenberg Heteml kusanagi Local mac mail MarkDown MySQL node SCF shifter SnowMonkeyForms SnowMonkeyTheme terminal Volta WAF wp-cli YoastSEO YouTube カルーセル サブクエリ シェアボタン スライダー タクソノミー 拡張子
運営会社
株式会社mgn

知りたかったことは見つかりましたか?

より良い解決方法があるかもしれません。もし解決が難しい場合はご相談下さい。
皆様からのお問い合わせをお待ちしております。

お問い合わせはこちらから

© Share-Snippet-Code.