SamYoungNY SamYoungNY - 16 days ago 9
CSS Question

Full-Width Vimeo Embed non-responsive

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".

Answer

Load the <iframe> stand-alone, adding the full-screen-vid class to it, should work.