Hiding YouTube WaterMark In Embedded Videos
If you’re using YouTube to host your sales pages – chances are you’ll want to be in a lot more control of the player than the standard embed code you can copy and paste from Youtube.
Sure.. you can disable the player controls with controls=0 and set it to play automatically with autoplay=1 and hide the header with showinfo=0.. But, what if you want to remove the YouTube watermark altogether?
Well my friends – here’s the answer!
Firstly, copy the standard YouTube embed code – let’s use and old classic, “Grumpy Cat” as an example..
The standard embed code looks like this:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/INscMGmhmX4?rel=0&controls=0&showinfo=0″ frameborder=”0″ allowfullscreen></iframe>
Which results in this:
OK.. so we’ve got out basic video – whoop-dee-do.. next, if for some reason you have visible controls (the play/pause button at the bottom), just make sure you’ve got &controls=0 somewhere in your src string.
Right – now, we need to wrap the video in a special “p” tag (or any other tag.. but if you’re using WordPress, “p” is the easiest..
The tag should look like this:
<p style=”height:<your video height>; overflow:hidden”>
So, our html looks like this:
<p style=”height:315px; overflow:hidden”>
“But Michael, that still looks the same!” you say.. Sure does! But after the next step it won’t.
So, now what we need to do is make the iframe much bigger, and move it around a bit. The reason for this is that the YouTube watermark always appears in the bottom right corner of the video, and the video will get black bars top and bottom if the aspect ratio is wrong.
Mumbo jumbo aside – here’s what you need to do…
Add 500 to the height of the iframe, and add the following tag to the iframe as well:
So our complete example looks like this (complete changes from standard embed code in bold):
<p style=”height: 315px; overflow: hidden;”><iframe src=”https://www.youtube.com/embed/INscMGmhmX4?rel=0&controls=0&showinfo=0″ width=”560″ height=”815″ frameborder=”0″ allowfullscreen=”allowfullscreen” style=”position:relative; top:-250px”></iframe></p>
And finally, the embed looks like this – no pesky watermarked hyperlink in sight!
Brilliant! Now we’ve got a global CDN, specialized for video, that can automatically play videos on our sales pages.. and there aren’t any pesky links to take traffic away – fantastic!
For bonus points – you could position a transparent div over the top of the video – that would prevent the right click context menu, or even pausing the video… 😉