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

コメントは停止中です。