デザイン・ホームページ・印刷のことならアートクリック

京都のデザイン・ホームページ制作会社

アートクリックのスタッフブログ

TOP > ブログ > サイトにYouTubeを埋め込む方法(レスポンシブ対応)

サイトにYouTubeを埋め込む方法(レスポンシブ対応)

2017年09月13日

YouTubeを埋め込む方法(レスポンシブ対応)

YouTubeの動画をレスポンシブサイトに埋め込むことが増えてきたのでコードの覚え書き。

.youtube_wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube_wrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

▼オプションのコード
——————————————————
【動画の自動再生】
 ;autoplay=1

【ループ再生】
 ;loop=1

まとめ
YouTubeに上げずに、動画を埋め込むのは一苦労なので埋め込む時はYouTubeに上げてほしい。