【コピペOK】ブログ記事に動画を埋め込む方法【スマホ対応】

「動画の埋め込みは簡単だけどスマホで見ると、はみ出していたりレイアウトが崩れてしまう」

CSSをコピペでちゃちゃっと楽に終わらせたい、こんな要望にお答えします。レスポンシブ化に苦戦している方、CSSが苦手な方は参考にどうぞ。

動画を埋め込む事自体は簡単だけど、スマホだと見切れたりはみ出していたりと問題が。

いざスタイルで調整しようとすると、意外とめんどくさかったりしますよね。

どうにかならないものか。

動画の埋め込みについて

埋め込みコードを使って動画を埋め込むってことなんですが、コードの取得方法を知らない方います？

せっかくなのでYouTubeを例に。

埋め込みコードの取得方法【YouTube】

方法は以下の通り。

埋め込みたいYouTube動画にアクセス
動画の下にある「共有」をクリック
出てきた表示の下にある「埋め込む」をクリック
表示されたHTMLコードをコピー

レスポンシブ化されていない例

下の動画はレスポンシブされていません、デベロッパーツールで見てみましょう。

見事なまでにはみ出しています。

埋め込みコードをそのままコピペするだけだとこうなります、それではレスポンシブ化してみましょう。

レスポンシブさせる方法【超簡単】

レスポンシブ化といっても難しい事はしません。

埋め込みコードをラップし、スタイルをコピペするだけでOK。

埋め込みコードをラップする

下記をコピペして、動画埋め込みコードを入れてください。

wordpressの投稿で使用する場合はテキストエディタにコピペしちゃいましょう。

<div class="iframe_wrap">
  <!-- ここに動画埋め込みコードをコピペ -->
</div>

埋め込みコードをdivでラップしているのがポイントです、スタイル適用のためクラスを指定しています。

下記スタイルをコピペ

下記スタイルをラップしている<div class="iframe_wrap">と埋め込みコード<ifram>に適用させましょう。

/* 640px以下 */
@media screen and (max-width: 640px) {
  /* ラップ(div) */
  .iframe_wrap {
      position: relative;
      width: 100%;
      padding: calc(315 / 560 * 100%) 0 0;
  }
  /* 埋め込みコード(iframe) */
  .iframe_wrap iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
}

メディアクエリは640pxとしていますが、お好みで調整してください。

今回はYouTubeの埋め込みコードにwidth,heightがデフォルトで指定されているので何も指定していません。

埋め込みコード内で指定しない場合はスタイルシートに記述する必要があります。

wordpressでテーマを使用している方は、子テーマに上のスタイルをコピペすればOKです。

下の埋め込み動画は上の手順でレスポンシブ化されています、デベロッパーツールで見てみましょう。

終わりに

いかがでしょうか。

動画埋め込みは需要がありますので軽く覚えておいても損はないと思います。

今回はYouTube動画を参考にスタイルしているので、比率さえあれば他の動画でも上手く使い回せると思います。

以上になります。