CODEWITHSUNDEEP
youtubeyoutube-iframe-api
Awesome
Awesome

Reputation: 6609

How to remove youtube branding, video information and related videos

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 ?

Upvotes: 1

Views: 12755

Answers (1)

Eliezer Berlin
Eliezer Berlin

Reputation: 3576

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 buttons and branding (More than modestbranding=1) may be a violation of Youtube's Terms of Service, as apparently the Youtube buttons and branding are 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;
}

Upvotes: 9

Related Questions