SamYoungNY SamYoungNY - 1 year ago 127
CSS Question

Full-Width Vimeo Embed non-responsive

I have embedded a vimeo within a

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
but that doesn't work.

<div class="full-screen-vid">
<iframe src="" width="100%" height="700" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download