【ブログ用】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 class=”movie-resp”> 
~ ここに埋め込みコード ~
</div>

CSSに追加する

.movie-resp {
  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

おすすめ

コメントを残す

メールアドレスが公開されることはありません。