Webサイト制作日報

2018/11/11(sun)　朝までWebってますｗ

ウェブサイトに、YouTubeをiframeで貼るのは良いのですが、
YouTubeの再生終了後に、別の関連動画が映し出されるのは痛いですよね・・・
以前は、オプションや?rel=0タグなりで非表示にしていたのですが、
あれ？ 表示されている！
YouTube公式によると、Googleさんの方針で効かなくされてしまったようです・・・

<dd class="frame-wrapper__video">
<iframe width="560" height="315"
 src="https://www.youtube.com/embed/〜〜?rel=0"
 frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</dd>

/* CSS  YouTube 幅100％レスポンシブ */
.frame-wrapper__video {
  position: relative;
  width: 100%; height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 50px;
}
.frame-wrapper__video iframe {
  width: 100%; height: 100%;
  position: absolute;
  top: 0; left: 0;
}

ついでに上記のCSSは、YouTube レスポンシブ100％表示の例です。

| コメント(0) | HTML | |