Hide YouTube video controls (Title, Watch later, Share) using HTML / CSS / JavaScript

Question

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

<iframe width="560" height="315" src="https://www.youtube.com/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.com/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?

Have you tried this ? [Link](https://stackoverflow.com/questions/20710764/can-you-hide-the-controls-of-a-youtube-embed-without-enabling-autoplay) and also this one [Link](https://stackoverflow.com/questions/13418028/youtube-javascript-api-disable-related-videos) — Dhruv, May 15 '20 at 03:41

Lewis Lockhart · Answer 1 · 2020-05-15T04:10:37.243

The old way of doing this looked like:

<iframe width="560" height="315" src="https://www.youtube.com/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.com/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.

54ka · Answer 2 · 2020-05-15T04:34:47.857

0

This is not the best solution but it may work for you

<div class="wrap">
    <iframe src="https://www.youtube.com/embed/o32suVhTyHM?autoplay=0&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=0&amp;modestbranding=1&amp;wmode=transparent" allowfullscreen="allowfullscreen" width="100%" height="408" frameborder="0"></iframe>
</div>

<style>
    .wrap{
        height: 408px;
        overflow: hidden;
    }
    iframe {
        position: relative;
        top: -64px;
    }
</style>

edited May 15 '20 at 04:34

answered May 15 '20 at 04:21

54ka

3,501
2
9
24

Thanks dear, but it is not hiding the Top Layer of the Video (Title of the Video, Watch later and Share icons of the video) – Affan May 15 '20 at 05:42
1

`controls=0` doesn't work in 2021, because Youtube deprecated this param – Oleksandr Savchenko Sep 03 '21 at 12:11

score 0 · Answer 3 · answered May 15 '20 at 09:27

This is very common 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;
}

Didn't do anything for me. Do you have any working example? – yenren Dec 23 '20 at 06:26 — yenren, Dec 23 '20 at 06:26

score 0 · Answer 4 · answered May 27 '22 at 08:08

0

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.

answered May 27 '22 at 08:08

Xaxx

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 27 '22 at 14:52

score -1 · Answer 5 · edited Feb 08 '21 at 22:49

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

codepen.io/vinukumar-vs/pen/GRgpeqE

    <link rel="stylesheet" href="https://vjs.zencdn.net/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.com/watch?v=xjS6SftYQaQ"}]}'
    >
    </video>
    <script src="https://vjs.zencdn.net/5.4.6/video.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.0/Youtube.min.js"></script>

Hide YouTube video controls (Title, Watch later, Share) using HTML / CSS / JavaScript

5 Answers5

Linked