動画を埋め込む(YouTube)

Webサイトに動画を掲載するにはどのようにしたら良いでしょうか？
動画共用サイトとして有名なところでは、YouTubeやVimeoがあります。
ここでは、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%;
  }

埋め込みたい YouTube 動画に移動します。 https://youtu.be/OAo1GBrdvzg
動画の下にある「共有」をクリックします。
「埋め込む」をクリックします。
ボックスに表示されている HTML コードをコピーします。
ウェブサイトに、HTML コードを貼り付けます。
不要な部分もあるので、必要な部分だけを残して完成です。 allow="accelerometer;(略)を削除しています。
?rel=0&showinfo=0"を付けることで、

動画再生した後に関連動画が表示されなくなります。
動画再生中の表題が非表示になり、すっきりします。

参考

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