I have embedded a vimeo within a div that is the full-width of the viewport. The video worked perfectly for a couple of days but now the play button (and all other buttons) are completely non-responsive.
I've tried messing around with the z-index but that doesn't work.
<div class="full-screen-vid">
<iframe src="https://player.vimeo.com/video/192013765" width="100%" height="700" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
.full-screen-vid {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 90px;
z-index: -1;
}
There is a strange message I've been getting in the console which I looked up and tried to fix but I don't think it is the problem (or the whole problem) because if I remove the video from the full-screen-vid, it works correctly.
Console message:
Refused to load the script'data:application/javascript;base64,KGZ1bmN0aW9xxxxIGZ1…xxxxxxxxxxxx='
because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'
https://f.vimeocdn.com https://ssl.google-analytics.com https://js-agent.newrelic.com https://bam.nr-data.net https://f.vimeocdn.com".
Load the <iframe> stand-alone, adding the full-screen-vid class to it, should work.