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

FitVids JS

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件のコメント

コメントは停止中です。