PC活用術
パソコンを有効活用するための情報・自作PCパーツ情報・フリーソフト紹介解説。
大手レビューサイトとは違い、皆さんのお財布にやさしい情報発信をテーマにしています。
TOP > HTML/CSS/JS サイトの小技 > Youtube の埋め込み動画をアスペクト比を保ってでウィンドウ幅に合わせて可変させる方法

Youtube の埋め込み動画をアスペクト比を保ってでウィンドウ幅に合わせて可変させる方法

Youtube

2018年現在の Youtube の仕様と、アスペクト比 4:3 の動画をほぼ見かけることが無くなったこともあり、16:9 専用の内容に記事を訂正しました。
Youtube の動画をサイトに埋め込む際に CSS だけで動画サイズを自動で可変させ、ウィンドウ幅にプレイヤー幅を合わせる方法を紹介します。

設置例はこの様になります。

では設置方法を紹介します。
Youtube の共有タグをコピーしたものを、ブロック要素一つで囲みます。 筆者の場合、
<div class="player">
という要素がそれに当たります。
HTML では貼り付けたい箇所に次のタグを入力します。

●●●の部分に自分が貼り付けたい動画の ID を入力します。
例の動画の場合ページの URL は次のようになっています。
https://www.youtube.com/watch?v=f7u9uP__b0Q
この f7u9uP__b0Q の部分が ID です。

width="700" height="394"
の指定数値は 16:9 のアスペクト比で、自身のサイトの張り付ける最大幅の横幅とそれに合わせた縦幅を指定します。
アスペクト比の計算にはこちらのページをお使いください。

CSS には次のように指定します。

rss1 hatena Tweet facebook googleplus Line

コメント

◀ NEWTOP ▲ 400 ▲ 400 ▼ OLD ▶
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。