Hide fullscreen button in video control


#1

Hi there! :slight_smile:
I have a little problem with an ad I created.
The ad is running an video and through the guidlines of the hoster the video it not allowed to enable fullscreen mode.
So I integrated this code:

<style> video::-webkit-media-controls-fullscreen-button { display: none; } </style>

But this solution is only for webkit browsers and doesn’t work with IE and Firefox :confused:
I searched alot on the internet but didn’t find any fitting solution. Does anyone here has an idea?
best regards,
Michi


(Mark Hunte) #2

Do you need any of the controls,
If not remove the controls attribute from the video tag

Do you need to click on the video,
if not try checking ignore all pointer events for the video element in the Actions inspector.

Some more info would probably help. Maybe post an example project also


#3

I need the controls.
It’s an ad for an upcoming sale special, so I can’t post the files right now. But the layout is an normal ad, with a screen playing a Video. The video should have the controls without the fullscreen button and the rest of the banner is linked with a clicktag.


#4

Hi Michi!

I’ve dug around and found out a few interesting things:

There does not appear currently to be a simple universal browser setting that allows the discrete removal of individual control buttons - all or nothing. Otherwise You have to roll your own.

However, if You create an iFrame and do not include the “allowfullscreen” in the iFrame tag - voilà no full screen. Please see this link for more.

Next - there are developments on the horizon - mainly about a subtree of DOM elements called the “Shadow DOM”. Currently only Chrome & Opera support scripting the CSS of this feature. Safari & Firefox have it under development… please click here for a full list of browser support.

Example code:

video::-webkit-media-controls-fullscreen-button {
display: none;
}

This subject of Shadow DOM discussed pretty thoroughly at CSS Tricks.


#5

The trick with the iFrame is awesome! Thanks alot!
But now I have to fix the soundscripts :smiley: The sound of the video was only playing while mouse over:

hypeDocument.getElementById('videoclip').muted = false;

I think that’s def a project for tomorrow, because it’s 2a.m. :no_mouth:


(Mark Hunte) #6

Lol, I ran across those while looking about but suspected that the iFrame trick may cause problems else where. Well done @JimScott for testing it. :smiley:

I was going to suggest you just remove the controls and roll your own custom controls that you need… which is pretty easy to do.


#7

Yeah I though about that too @MarkHunte but the whole Banner is responsive and adapting his Size to 100% height. So the positioning with a lot of Buttons and Timeline is a little problem again :smiley:

I will tell you what I finaly choose :slight_smile:


#8

Ok I’m still awake and trying the iframe method, but I don’t know how to communicate with the iframe.
Option 1:
I put the video-code in an HTML Widget (= iframe). Everything works, but I can’t give the iframe an id and without I have no idea how to program the javascript.
Option 2:
I create a rectangle and fill it with the Code for the Video and including an iframe with an id.
Problem: the code gets messed up…

:frowning:


(Mark Hunte) #9

Part of the problem I foresaw with the iframe.

I rushing out so cannot go into details here but I put up a tutorial of how to communicate with the iframes

This should help…