Youtubeやvimeo、ニコニコ動画などの埋め込み動画をレスポンシブに対応させる!

投稿日:

photo credit: ZERGE_VIOLATOR via photopin cc

Youtubeやvimeo、ニコニコ動画などの埋め込み動画をレスポンシブに対応させる方法です!


下記のスタイルシートを追加します!


    .video-container {
    position: relative;
    padding-bottom: 56.25%;/* 16:9 */
    padding-top: 25px;
    height: 0;
    overflow: hidden;
    }

    .video-container iframe,
    .video-container object,
    .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

続いてHTMLは「video-container」のdivタグの中に貼り付け用のタグを挟むだけです。


    <div class="video-container">
        <iframe src="http://www.youtube.com/embed/EnOs2wARwT4" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
    </div>

≫ サンプルページこちら

iPhoneで見ると、ニコニコ動画がうまくいかないですが、変に横に飛び出たりしないので良しとするしか、今のところないみたいです。

SOURCE:Responsive Youtube Embed

この記事を見た人は、こんな記事も見ています!

  • この記事を書いた人
harukin

harukin

個人的なことを個人的な視点で書いてます。 Eスポーツ、ガジェット、フィットネスなどが中心です。 ゲーム大会のイベント事業、WEB管理・作成などをしております。

-HTML・CSS・JS, WEBデザイン
-, , , , , , , ,

Copyright© ふらリズム|EスポーツやPCゲーム、ガジェットを中心に情報をお届け! , 2018 All Rights Reserved.