So I can get rid of the play icon whenever the video is started as it autoplays anyway. Works fine as plain html, but not in Hype.
Using these styles:
/* set up the aspect ratio of the video /
.overlay {
width:100% !important;
height:0 !important;
padding-bottom:56.25% !important;
overflow:hidden !important;
position:absolute !important;
}
/ hide the default video controls */
.overlay iframe {
width:100% !important;
height:180% !important;
position:absolute !important;
left:0 !important;
top:-40% !important;
z-index:-1 !important;
}
In the hype code, it seems the styles that hype applies to the element is overriding something. I've tried using !important on everything.
If I move the div which has the vimeo iframe when inspecting in the browser, out of the hype_container div, remove the HYPE_element class and the position:absolute that Hype applies to styles then it'll work.
When the page loads, I briefly see a pause button, the video plays, and the pause button disappears. If I move my mouse back over the video, I see where the pause button is.
The CSS you have in the head of your document won't affect the iframe loaded from Vimeo. That is isolated.
Ok, forget that link I sent. It doesn’t show what the css is supposed to do which is hide the play pause icon in the middle of the video. I did it up in html below: