Best IT Recipes

Hide video play button for iPhone HTML5

I want to hide the big play button that appears by default in the <video> element

Is it possible?

+55
html5 iphone
Jan 18 '12 at 13:50
source share
12 answers

Apple seems to have changed the shadow space again.

To hide the play button control, you must use the following CSS:

 /* This used to work for the parent element of button divs */ /* But it does not work with newer browsers, the below doesn't hide the play button parent div */ *::-webkit-media-controls-panel { display: none!important; -webkit-appearance: none; } /* Old shadow dom for play button */ *::-webkit-media-controls-play-button { display: none!important; -webkit-appearance: none; } /* New shadow dom for play button */ /* This one works! */ *::-webkit-media-controls-start-playback-button { display: none!important; -webkit-appearance: none; }
+63
May 31 '16 at 18:46
source share

I don’t have an iOS device to test, but maybe try the following:

 video::-webkit-media-controls { display:none !important; }
+106
Mar 03 '14 at 11:44
source share

Look at the shadow DOM in Safari. iOS tells me what you want (only for the central center play button):

 video::-webkit-media-controls-start-playback-button { display: none !important; }

A response from Jan hides everything, including text tracks (closed captions ...)

+56
Aug 05 '15 at 16:31
source share

In the original video file, you can simply change

 controls= "false"

For CSS Safari, which is a native ios browser, you can also try this hacker trick

 .custom-video-controls { z-index: 2147483647; }

Here's a link to a detailed discussion of controls / hiding controls on HTML 5 video

http://css-tricks.com/custom-controls-in-html5-video-full-screen/

+9
03 Mar. '14 at 11:27
source share

Based on Jan's answer

 video::-webkit-media-controls { opacity: 0; }

This will hide all controls. Good for background videos that won't start automatically.

+2
Apr 19 '17 at 2:14 on
source share

For webapps. Works with iOS 10.3 iPhone7 and Safari 10.1 on Mac. Thanks for the previous members. I also had a problem that the element does not contain the attribute "control" at all.

 '<style type="text/css">'+ '*::-webkit-media-controls-panel {'+ ' display: none!important;'+ ' -webkit-appearance: none;'+ ' }'+ /* Old shadow dom for play button */ '*::--webkit-media-controls-play-button {'+ 'display: none!important;'+ '-webkit-appearance: none;'+ '}'+ /* New shadow dom for play button */ /* This one works */ '*::-webkit-media-controls-start-playback-button {'+ 'display: none!important;'+ ' -webkit-appearance: none;'+ '}'+ +'</style>'
+1
Mar 30 '17 at 13:42 on
source share

Today @ 2017 in iOS 10 this works:

 .video-background::-webkit-media-controls-panel, .video-background::-webkit-media-controls-start-playback-button { display: none !important; }
+1
Jun 15 '17 at 13:02 on
source share

You cannot delete the play button. This video placeholder always appears as the document says: iPhone Video PlaceHolder . But maybe you may find that you are on the iphone and display an image with a link to your video, not a video tag.

 <a href="yourvideo.mp4"><img src="yourposter.png"/></a>

The video will be launched in the player as a video tag.

0
Mar 03 '14 at 11:49
source share
 video::-webkit-media-controls { display:none !important; }

Doesn't work for me on iOS, but

 *::-webkit-media-controls-panel { display: none!important; -webkit-appearance: none; } /* Old shadow dom for play button */ *::--webkit-media-controls-play-button { display: none!important; -webkit-appearance: none; } /* New shadow dom for play button */ /* This one works */ *::-webkit-media-controls-start-playback-button { display: none!important; -webkit-appearance: none; }

Worked great!

0
Mar 16 '17 at 20:53 on
source share

Try the following:

 video { &::-webkit-media-controls { display:none !important; } &::-webkit-media-controls-start-playback-button { display: none!important; -webkit-appearance: none; } }
0
Aug 31 '17 at 9:23
source share

According to this answer , in the Google Chrome browser we can hide the big play button as follows:

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

Perhaps this will also work for the iOS / WebView browser.

0
Apr 29 '19 at 4:00
source share

Yes you can do it! The trick is to "hide" the video controls without adding the "controls" attribute to your video tag. Then you can dynamically add it a few seconds after the video starts playing by adding the "controls" property to the tag using Javascript. Just set the value to "controls" and it will dynamically display in the DOM ... as if you had added controls to your HTML video tag. Adjust the timer if necessary.

 <video id="some-video-id" src="some-video-url" poster="some-thumbnail-url" /> <a href="javascript:void(0);" id="startVideoLink">Start the Video</a> <script type="text/javascript"> var oVideoTag = document.getElementById('some-video-id'); var oLink = document.getElementById('startVideoLink'); if (oLink && oVideoTag) { oLink.addEventListener('click',function(e) { oVideoTag.play(); setTimeout(function() { oVideoTag.controls = 'controls'; },2500); },false); } </script>
-5
Nov 09
source share


More articles:


All Articles