adblockが有効になっています。
設定より http://vivablog.net/ で無効にしてください。

[JS] 貼り付けたYouTube動画をレスポンシブにするjQuery「FitVids.JS」

2014年12月24日 / 1件のコメント

記事内にプロモーションを含む場合があります。

「FitVids.js」は、YouTubeやVimeoなどの動画サイトから貼り付けコードで貼り付けた動画を、レスポンシブに対応させるjQueryプラグイン。

YouTubeなどの貼り付けコードはmax-widthを100%にしても横長になってしまうため、完全にレスポンシブとは言えず、ちゃんと表示させるにはこのjQueryライブラリを使用する。

CSSだけでやる方法

jQueryの導入がよく分からん、またはJavaScriptを無効にしているユーザーに対してもレスポンシブ表示を適用させたい場合は、iframeをコンテナに入れてCSSでレスポンシブにすることができます。

        .youtube {
         position: relative;
         padding-bottom: 56.25%;
         height: 0;
         margin-top: 20px; 
         margin-bottom: 20px;
}
 
        .youtube iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
}

YouTubeの貼り付けコードをdivコンテナに入れる。

<div class="youtube">
<iframe src="//www.youtube.com/embed/xxxxxxxxxx" allowfullscreen="" height="315" frameborder="0" width="560"></iframe>
</div>

Source: FitVids.JS

1件のコメント

ピンバック: [CSS] 動画の貼り付けコードをレスポンシブに最適化させる | VIVABlog

コメントは停止中です。