WAVE

動画を埋め込む(YouTube)

YouTube

Webサイトに動画を掲載するにはどのようにしたら良いでしょうか?
動画共用サイトとして有名なところでは、YouTubeVimeoがあります。
ここでは、YouTubeの埋め込み方法をご紹介します。
可愛い猫の動画を埋め込んでみました。

YouTubeの埋め込み例

index.html
<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>YouTube</h1>
    <div class="video">
      <div class="inner">
        <iframe src="https://www.youtube.com/embed/OAo1GBrdvzg?rel=0&showinfo=0"
                frameborder="0"
                allowfullscreen>
        </iframe>
      </div>
    </div>
  </body>
  </html>
style.css
.video {
    box-sizing: border-box;
    width: 100%;
  }
  
  .video .inner {
    overflow: hidden;
    position: relative;
    padding-top: calc(100% * 9 / 16);
  }
  
  .video .inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  1. 埋め込みたい YouTube 動画に移動します。 https://youtu.be/OAo1GBrdvzg

  2. 動画の下にある 「共有」をクリックします。 猫1

  3. 「埋め込む」 をクリックします。 猫2

  4. ボックスに表示されている HTML コードをコピーします。 猫3

  5. ウェブサイトに、HTML コードを貼り付けます。

  6. 不要な部分もあるので、必要な部分だけを残して完成です。 allow="accelerometer;(略)を削除しています。
    ?rel=0&showinfo=0"を付けることで、

参考

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ