Hello,
I am making a website with a video on top that plays automaticly in a loop.
I also have a navigation bar, that snaps to the top of the screen. In this navigation bar I have <a> links with hover to navigate to other pages.
But the problem is, if i scroll down on some places the hover doesnt work. You can still click the link but the hover effect will not work (for example changing text color)
Even though the places where this happens doesnt seem to have any relation to any div's position. And I tried to change the z-index of everything on my page. But nothing seemed to work.
BUT with F12 I found out that if I delete the node of the video. There is no problem with the hover anymore.
Here is all the code that is used by the video:
//html
<video id="loopvideo" loop="loop" webkit-playsinline="true" width="1920" height="1080">
<source src="/Videos/loopvideo.mp4" type="video/mp4">
<source src="/Videos/loopvideo.webm" type="video/webm">
Your browser does not support the video tag.
</video>
///css
#loopvideo
{
position: absolute;
top: 0;
bottom: 0;
width: 1920px;
left: -960px;
}
If I delete the loopvideo node with F12, the hover works fine.
Also as said before, doesnt seem to have much relation to the position of this video, even when I scroll down all the way, where the video is not seen. Some places the hover still doesnt work untill I delete the video.
What could be my problem?
Thanks in advance for any help
Alexander
