【ブログ用】YouTubeなどの動画の埋め込みとプレーヤーサイズをレスポンシブ対応にする方法
埋め込み動画のレスポンシブ対応
YouTubeやTwitchなどの動画をブログに埋め込む際の方法と、ブログに埋め込んだ時に表示されるプレーヤーのサイズをレスポンシブに対応させる方法の紹介です。
YouTubeの動画を埋め込む
まずYouTubeの動画をブログに埋め込む方法です。
URLをそのまま貼る
https://www.youtube.com/watch?v=0soAZNFIbKc
こうなる↑
使っているブログサービスによっては動画のURLをそのまま貼っても動画の埋め込みができると思います。
しかもなんかレスポンシブ対応されてるんでこれでうまく再生できる人はこれで良いと思います。お疲れ様でした。(‘ω’)ノ笑
埋め込みコードを取得して貼る
動画ページから「共有」を押します。
「埋め込む」を押します。
埋め込みコードが表示されるので、コピペして貼りつけます。※開始位置を指定したい場合は開始位置のチェックを入れます。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/0soAZNFIbKc” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
そのまま貼った場合こんな感じになります↑
PCで表示した場合若干小さいだけでなく、このままだとレスポンシブ対応されていません…。スマホで見るとサイズが大きすぎてはみ出てしまっていると思います。
twitchのクリップ埋め込み
twitchの場合は若干ややこしかったので下記にまとめました。
動画のレスポンシブ対応
先述したようにYouTubeの埋め込みコードだとデフォルトのプレーヤーサイズは「width=”560″ height=”315″」になっています。
ただ、これだと動画のレスポンシブ対応が出来ていないのでスマホで見た時にはみ出たりする場合があります。
要するに動画サイズが固定されているのでページ幅に合わないんですね。
iframeタグの中では%を使った割合での指定ができないので、CSSに要素を追加して、以後動画の埋め込みコードをdivで囲むだけでレスポンシブに対応させるようにします。
動画をdivで囲む
divのclassを独自のものにします。
ここでは、responsiveの頭を取って「movie-resp」としました。このdivにCSSを設定します。
～ ここに埋め込みコード ～
</div>
CSSに追加する
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.movie-resp iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
これをstyle.cssに追加すると、埋め込んだ動画の幅がウィンドウ幅に合わせて伸縮されるようになると思います。※CSS更新後は要キャッシュ削除
上記を適用した動画↓
たぶん何も変わらないと思いますが、ウィンドウの幅に合わせてサイズが変わっていると思います。サイズが不自然にはみ出たりしていなければ成功です。
これで、次回以降は<div class=”movie-resp”><div>で動画を囲むだけで動画をレスポンシブ化する事ができます。
PR
