Remove Vimeo players buttons in Hype

Elements Audio & Video
1

I'm trying to do the following:

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.

This is really frustrating.

See here for example:

http://master.includingme.net/test/vimeo_test_forum/vimeo_test_forum.html

2

You may want to uncheck “Protect from External Styles” which allows this kind of inheritance without interference:

3

Hi. Yeh I already tried that. Any other thoughts?

4

How do you want this to work?

Here's what I see:

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.

I've done this and not seeing any different behavior from the video. I am seeing the same behavior that you posted in the demo: Stu Nicholls | CSS play | Tutorial | Hiding Vimeo video default controls and replace with 'Play/Pause' button

5

Is it possible I can see your hype file? Would be useful to see.

6

I was loading from the URL you sent in Safari & Chrome.

7

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:

http://master.includingme.net/test/hide_vimeo_button.html

All I want to do it replicate that in Hype.

Edit: Nevermind. Solved it by having the play buttons on by default in Vimeo.