How can I remove the watch later and share buttons from youtube iframe embed player. Using the following embed code for embedding video clips.
The only way to do it is to create a negative margin at the top of a container which has overflow
set to hidden
. See my CodePen here.
CSS:
.videoWrapper {
overflow: hidden;
}
@media (min-width: 1500px) {
.videoWrapper {
margin-top: -135px;
}
}
@media (min-width: 1200px) {
.videoWrapper {
margin-top: -75px;
}
}
HTML:
<div class="videoWrapper">
<iframe width="100% src="https://www.youtube.com/embed/cPVgwz5aN1o" frameborder="0" allowfullscreen></iframe>
</div>
But then of course you lose the top of your video. You may also be breaching some of part of YouTube's Terms of Service.
Also, this tends to only work well at browser widths above 1200px. Below this the title and top controls take up a much larger percentage of player real estate, so you would lose too much off the top of your video.
I don't think it is possible with the iframe method. My reasons for thinking that is:
You could probably achieve something similar by turning showinfo off, and using the other methods to grab the video title.
In the url params put the params : showinfo=0.
Like this : https://www.youtube.com/embed/youidvideo?autoplay=1&rel=0&showinfo=0
It will remove share and watch later button!
As an example, this is what you're trying to do:
document.getElementsByTagName('iframe')[0].contentWindow.getElementsByClassName('ytp-watch-later-button')[0].style.display = 'none';
But, short answer, there is no simple way to do this, because YouTube is on a different domain:
'Not possible from client side . A javascript error will be raised "Error: Permission denied to access property "document"" since the Iframe is not part of your domaine...' https://stackoverflow.com/a/30545122/2488877
Though, you might find an answer suitable to your needs if you're tech-savvy in the answers to the question above.
This parameter is deprecated and will be ignored after September 25, 2018.
Using YouTube embed's privacy-enhanced mode (youtube-nocookie), it will hide "Watch later" button, but not "Share" button.
<iframe width="854" height="480" src="https://www.youtube-nocookie.com/embed/cPVgwz5aN1o" frameborder="0" allowfullscreen></iframe>