I am embedding Youtube / Daily Motion Videos in my website...

<iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

I don't want the Youtube Videos Controls to be visible on my website...

Please look at the attached files, i want to remove the controls which are at the top (Highlighted in Red Color) and also want to remove controls which are at the bottom (Highlighted in Red Color).

Previously it was possible in youtube videos using showinfo parameter. Now that parameter is deprecated, reference()

Is there any other way to do that using HTML / CSS / JavaScript

OR

Can i run youtube videos on any player and can fulfill my requirements?

I am embedding Youtube / Daily Motion Videos in my website...

<iframe width="560" height="315" src="https://www.youtube./embed/an-6owXUwdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

I don't want the Youtube Videos Controls to be visible on my website...

Please look at the attached files, i want to remove the controls which are at the top (Highlighted in Red Color) and also want to remove controls which are at the bottom (Highlighted in Red Color).

Previously it was possible in youtube videos using showinfo parameter. Now that parameter is deprecated, reference(https://developers.google./youtube/player_parameters#showinfo)

Is there any other way to do that using HTML / CSS / JavaScript

OR

Can i run youtube videos on any player and can fulfill my requirements?

• javascript
• html
• css
• wordpress

• Have you tried this ? Link and also this one Link – Dhruv Commented May 15, 2020 at 3:41
• Not working for me... – Affan Commented May 15, 2020 at 3:55

5 Answers 5

So far there is no working way we could add css in iframe specially for YT Players to hide title, youtube logo.

Have tried to inject styles but it does work.

const iframeYT = document.querySelector(".iframe-wrapper iframe");
const style = document.createElement("style");
style.textContent = `
  .ytp-chrome-top.ytp-show-cards-title,
    .ytp-gradient-top,
    .ytp-gradient-bottom {
      display: none;
    }
    a.ytp-watermark.yt-uix-sessionlink.ytp-watermark-small {
      display: none;
    }
`;
iframeYT.contentDocument.head.appendChild(style);
console.dir(iframeYT.contentDocument);

<div class="iframe-wrapper">
  <iframe width="500" height="280" src="https://www.youtube./embed/pX8s7WF3sC8?autoplay=1&mute=1&controls=0&modestbranding=1&showinfo=0&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen></iframe>
</div>

Luckily, a css-hack along with ?autoplay=1&mute=1&controls=0&modestbranding=1&showinfo=0&rel=0 works out pretty fine. It does hide the video title and the youtube logo from iframe. Hope it'll work out for you too.

.iframe-wrapper {
  height: 280px;
  overflow: hidden;
}

.iframe-wrapper iframe {
  height: 400px;
  margin-top: -60px;
}

<div class="iframe-wrapper">
  <iframe width="500" height="280" src="https://www.youtube./embed/pX8s7WF3sC8?autoplay=1&mute=1&controls=0&modestbranding=1&showinfo=0&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen></iframe>
</div>

Check this demo

The old way of doing this looked like:

<iframe width="560" height="315" src="https://www.youtube./embed/an-6owXUwdg?controls=0&showinfo=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

I added ?controls=0&showinfo=0 to the query string.

Unfortunately, when I tried it, it no longer worked. Upon further research I found that the ability to hide what you would like to has been removed. See the information here: https://developers.google./youtube/player_parameters#showinfo

"Note: This parameter is deprecated and will be ignored after September 25, 2018."

So currently there is no way to do it.

If you're using Youtube Iframe. It won't work because Youtube has deprecated the parameter to control title, share and watch-later option.

Other ways to solve this: Try other video players for this, something like videojs or even service like vimeo provides custmisation of the video player.

This is very mon issue while we embedding videos in HTML, So We fix this issue with a simple trick, we will create a parent (wrapper) div of iframe and add padding-bottom: 56.25%. This is where the magic is. In CSS, the padding-bottom property can receive a percentage, this is what keeps our iframe to the right ratio. By using percentage.

.parent{
    height: 0;
    margin: auto;
    z-index: 1;
    position: relative;
    padding-top: 25px;
    padding-bottom: 56.25%;
    display: block;
    overflow: hidden;
}
.parent iframe{
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    position: absolute;
}

Maybe this will help: https://github./videojs/videojs-youtube

codepen.io/vinukumar-vs/pen/GRgpeqE

    <link rel="stylesheet" href="https://vjs.zencdn/5.4.6/video-js.min.css">
    <video
      id="vid1"
      class="video-js vjs-default-skin"
      width="640" height="264"
      data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube./watch?v=xjS6SftYQaQ"}]}'
    >
    </video>
    <script src="https://vjs.zencdn/5.4.6/video.min.js"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/videojs-youtube/2.6.0/Youtube.min.js"></script>