0
votes

I am trying to use youtube embed video as background of website banner. I'm using iframe to render youtube video. Added below parameters to the video link, but still video showing YouTube logo at bottom right corner and showing video title and share link on the top.

controls=0&autoplay=1&mute=1&enablejsapi=1&showinfo=0&autohide=1

How to remove video title, share link and YouTube logo ? Is there a way to stop showing related videos ?

1

1 Answers

4
votes

What you're looking for is the showinfo=0 and rel=0 parameters, which have been deprecated and removed over the last two years. "Show related Videos", at least, can be prevented by forcing the video to repeatedly loop with &playlist=videoID, and the youtube button in the bottom-right corner can be removed via modestbranding=1.

This is about as close as you can get, which will show a brief flash when the video loads:

Codepen: https://codepen.io/Terrafire123/pen/yLayQvM

Note that hiding the Youtube logo that appears when the video first loads may be a violation of Youtube's Terms of Service, as apparently the Youtube branding is a key part of the "Youtube Experience". See this link for more information: https://developers.google.com/youtube/terms/developer-policies-guide#your_api_service_must_reflect_a_user%E2%80%99s_standard_experience_on_youtube

<div class="wrapper"> 
  <iframe src="https://www.youtube.com/embed/oSmUI3m2kLk?autoplay=1&controls=0&disablekb=1&loop=1&modestbranding=1&playsinline=1&color=white&mute=1&playlist=oSmUI3m2kLk" ></iframe>
</div>
<!-- Note the video ID, oSmUI3m2kLk, appears twice. Once in the beginning, and once at the end inside "playlist.", which will force it to continually loop over the same video  -->


body,html{
  margin:0;
}

.wrapper{
  height:500px;
  position:relative;
  overflow:hidden;
}
iframe{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:0;
  pointer-events:none;
  width:100%;
  height:56.25vw;
}