2014年3月26日 11:39

Youtube動画[iframe]をサイトの幅に合わせて可変させる方法。

YouTube Perfect GuideBook 2014年改訂版

iframeをレスポンシブwebデザインに対応させる方法

先日ブログをレスポンシブウェブデザインにした際、Youtubeの動画幅を可変にする方法を学んだのでメモ。

動画で見たい方は以下を見ればわかります。

#10 iframeを埋め込もう (1) | レスポンシブなウェブサイトを作ろう - プログラミングならドットインストール
#11 iframeを埋め込もう (2) | レスポンシブなウェブサイトを作ろう - プログラミングならドットインストール

尚、このやり方は親要素(この場合、記事エリア)が可変幅になっている必要があります。

スポンサードリンク

iframeをdivで囲う

まず、Youtubeから動画下にある「共有」を選びHTMLタグを取得します。

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

次にこれをdivタグで囲う。

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

で、この「moveクラス」と「moveクラス内のiframe」に以下CSSを割り当てます。

.move
{
position: relative;
padding-top: 56.25%;
}
.move>iframe
{
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
}

当ブログではスタイルシートにて指定しているので、↓動画のようにウェブブラウザの幅に合わせて可変するようになっています。

絶版後記

ドットインストールのレスポンシブ講座は非常に有用なのでオススメです。

しかし『アナと雪の女王』のエルサはかわいいよねー。

ブログをレスポンシブWebデザインにする為にやったことメモ

  • 【タグ】
便利&役立カテゴリの他の記事はこちら。

スポンサードリンク

news

新作同人誌! MEMORIE(あまんちゅ!イラスト本)の通販 → メロンブックス

イラスト・漫画など活動報告 → イラスト・漫画仕事および同人活動の記録| 絶版あかみる