Disable hover and click on html embedded video

Community resources General
1

Hi, I’m using an html embed video header on my site ( see link ), is there any way to disable the hover state so it doesn’t have a grey overlay if the user moves the mouse over it?

https://preview.webflow.com/preview/theo-home?utm_medium=preview_link&utm_source=designer&utm_content=theo-home&preview=5d790e3fc0a297f2b709a32ac25b93c9&workflow=preview

Thanks in advance

2

Hi Theo! Please update your post and provide a read-only link to your Webflow project so we can take a look. Instructions are here. Thanks!

3

Thanks Chris, all done!

1 Like
4

Great, thank you! Specifically, we’re adjusting the “overlay” value in your code from true to false. This would not be a hard and fast rule for every video embed, but it seems to work for your custom code here. Let me know if this takes care of it for you! Update your custom code to the following:

<div style="padding-top: 56.25%; position: relative; overflow: hidden;"><iframe frameborder="0" allowfullscreen="" scrolling="no" allow="autoplay;fullscreen" src="https://onelineplayer.com/player.html?autoplay=true&autopause=false&muted=true&loop=true&url=https%3A%2F%2Fwww.dropbox.com%2Fs%2Fjnqxt9gowtkd3bz%2FMain_showreel_05_small_2.mp4%3Fraw%3D1&poster=https%3A%2F%2Fwww.dropbox.com%2Fs%2F308vg38jkq8w5v9%2Fshowreel_cover.png%3Fraw%3D1&time=false&progressBar=false&overlay=false&muteButton=false&fullscreenButton=false&style=light&quality=auto&playButton=false" style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px;"></iframe></div>

<style>
.HTML-Embed {
 pointer-events: none;
}
</style>
5

Amazing! that did the trick, thanks a lot for your help Chris!

1 Like
6

Great! Happy to help.