How to disable watch and share button on youtube videos using CSS/ Reactjs

user_10576038 0
Viewed 7703

I want to disable watch and share buttons on youtube video using CSS / Reactjs. I am embedding youtube video in our application using ReactPlayer and tried to disable watch and share buttons by fetching the iframe and change the css classes pertaining to the buttons, I am able to fetch the iframe pertaining to the video. However, could not get reference to the elements in the #document which is part of the iframe to manipulate them.

I have gone through couple of posts and got to know that it is due to CORS.

Early we could achieve this by setting the config parameter showinfo=0 and rel=0. But now there are deprecated

Could someone help me on this.

youtube-iframe-api reactjs javascript
2 Answers

As you correctly noticed from Youtube revision history showinfo parameter is deprecated as of September 25, 2018. "Watch Later" and "Share" buttons were also part of this feature and they can't be removed.

Further you can never access/manipulate the dom-contents of iframe served from different source. Its like one web application having access to another application content.

Finally, the only hack I can suggest over here is you css position: absolute; pointer-events: none; for your dummy disabled share button and place it exactly over share icon of youtube player in your web application.

.overlay-banner {
    position: absolute;
    width: 560px; // width of video player
    height: 58px; // height of banner
    background: transparent;
    top: 0px;
    left: 0;
}

This overlay will prevent clicks on share/watch later icons. which can be bad user experience. Working fiddle link

So, You can modify thisoverlay-banner css background with your custom background image or color and make it display: block only when video is in pause/complete state which you can fetch though Yotube api.

Hope this works. :)

user_83978160
user_70638990
Related