レスポンシブWebデザイン対応のYouTube動画を挿入するには

レスポンシブWebデザインに対応したCSSの作成

挿入するYouTubeの動画の横と縦の比率が4:3なのか16:9なのかによってスタイルプロパティの値が異なります。いずれか適切なものを選択してください。

/* YouTube Video */
.iframe-content {
    position: relative;
    width: 100%;
    padding: 75% 0 0 0;
}
.iframe-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* YouTube Video */
.iframe-content {
    position: relative;
    width: 100%;
    padding: 56.25% 0 0 0;
}
.iframe-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

コードスニペットの新規作成

1. 画面右上の［スニペット］パネルを表示し、［オプション］をクリックして［新しいスニペット］をクリックします。
   
2. ［コード スニペットの新規作成と変更］ダイアログボックスで、名前と説明を適当に入力します。
3. ［挿入方法］は［置き換える］のままでOKです。
4. 最後に、テキスト部分に以下のように記述します。パイプ文字 "|" を入れると、挿入時にその場所にカーソルが移動します。ここでは、embed/ の後に該当するパラメーターを代入します。

   <div class="iframe-content">
   <iframe width="560" height="315" src="https://www.youtube.com/embed/|" frameborder="0" allowfullscreen></iframe></div>

   

コードスニペットを使ってコードを挿入する

1. コードビューに切り替えて、挿入したい場所にカーソルを移動します。
2. ［スニペット］パネルからYouTubeのスニペットをダブルクリックします。
   
3. パイプ文字のところにカーソルが移動しました。そこに挿入したいYouTubeの動画のパラメーターを代入します。
   

参考文献

• iframe要素のレスポンシブWebデザイン対応 | Tips Note

問題は解決しましたか？

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください！

▲このページのトップへ