スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[YouTube] 埋め込みサイズの縦横比を固定した状態で可変サイズにする

YouTubeの埋め込み動画サイズの縦横比を固定する

YouTubeの埋め込み動画のサイズをブラウザのサイズに合せて可変する仕様にしたい時に役立ちます。

1. YouTubeの埋め込みコード(iframeタグ)を用意する


<iframe src="https://www.youtube.com/embed/hlMSd_FafLE?rel=0&showinfo=0&vq=hd720" frameborder="0" allowfullscreen></iframe>

このiframeタグは動画個々で異なりますので、各自ご自身の埋め込みタグをお使いください。


2. <iframe>タグを<div>タグで囲む


<div class="video-container">
<iframe src="https://www.youtube.com/embed/hlMSd_FafLE?rel=0&showinfo=0&vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>

divタグで囲みます。また、divタグのclass属性を用意してください。


3. CSSで調整する


.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}

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

先ほどのdivタグ, iframeタグに対してCSSで指定します。
特にポイントが、padding-bottom: 56.25%;でこれが動画の16:9の画面アスペクト比に対応しています。


■ 参考文献
YoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法 | HTML5 – CSS3 mag (http://html5-css3.jp/tips/youtube-html5video-window.html
)

この記事を書いた人


阪神 総一(Sakagami Souichi)

作編曲家/ミキシング・マスタリングエンジニア。
主にロック/ポップスのボーカル曲の製作を得意とし、ゲーム/アニメなど分野で支持を得ている。
阪神 総一、個人音楽制作事務所「Trial & Error」代表

Trial & Error オフィシャルサイト http://www.tandess.com/music/
Related Posts Plugin for WordPress, Blogger...

テーマ : インターネット関連
ジャンル : コンピュータ

コメントの投稿

非公開コメント

プロフィール

阪神 総一

Author:阪神 総一
作編曲家/ミキシング/マスタリングエンジニア。
アニメ/ゲームのOP/ED/主題歌を主に製作しております。
楽曲製作/ミックスのご依頼はこちらから。
Trial & Error

ブログ内検索
フリーエリア
人気記事
カテゴリ
最近の記事
最近のコメント
アクセス
月別アーカイブ

2037年 11月 【1件】
2015年 06月 【1件】
2015年 05月 【4件】
2015年 04月 【2件】
2015年 03月 【4件】
2015年 02月 【1件】
2015年 01月 【2件】
2014年 12月 【8件】
2014年 11月 【14件】
2014年 10月 【6件】
2014年 09月 【1件】
2014年 08月 【1件】
2014年 07月 【27件】
2014年 06月 【18件】
2014年 05月 【13件】
2014年 04月 【11件】
2014年 03月 【3件】
2014年 02月 【7件】
2014年 01月 【16件】
2013年 12月 【71件】
2013年 11月 【25件】
2013年 10月 【15件】
2013年 09月 【21件】
2013年 08月 【12件】
2013年 07月 【11件】
2013年 06月 【10件】
2013年 05月 【2件】
2013年 04月 【38件】
2013年 03月 【15件】
2013年 02月 【18件】
2013年 01月 【34件】
2012年 12月 【10件】
2012年 11月 【9件】
2012年 10月 【22件】
2012年 09月 【18件】
2012年 08月 【14件】
2012年 07月 【17件】
2012年 06月 【11件】
2012年 05月 【6件】
2012年 04月 【3件】
2012年 03月 【2件】
2012年 02月 【3件】
2012年 01月 【1件】
2011年 12月 【1件】
2011年 11月 【2件】
2011年 10月 【12件】
2011年 09月 【15件】
2011年 08月 【12件】
2011年 07月 【12件】
2011年 06月 【11件】
2011年 05月 【13件】
2011年 04月 【4件】
2011年 03月 【12件】
2011年 02月 【15件】
2011年 01月 【7件】
2010年 12月 【24件】
2010年 11月 【2件】
2010年 10月 【8件】
2010年 09月 【3件】
2010年 08月 【5件】
2010年 07月 【7件】
2010年 06月 【2件】
2010年 04月 【4件】
2010年 02月 【4件】
2010年 01月 【3件】
2009年 12月 【2件】
2009年 11月 【10件】
2009年 10月 【6件】
2009年 09月 【5件】
2009年 08月 【6件】
2009年 07月 【5件】
2009年 06月 【8件】
2009年 05月 【4件】
2009年 04月 【5件】
2009年 03月 【5件】
2009年 02月 【4件】
2009年 01月 【6件】
2008年 12月 【5件】
2008年 11月 【3件】
2008年 10月 【1件】
2008年 09月 【6件】
2008年 08月 【8件】
2008年 07月 【9件】
2008年 06月 【6件】
2008年 05月 【2件】
2008年 03月 【5件】
2008年 01月 【4件】
2007年 12月 【5件】
2007年 11月 【13件】
2007年 10月 【5件】
2007年 09月 【1件】

Facebook
RSSフィード
RSSリーダーで購読する
リンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。