Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Remove play icon in video component on iPhone/iPad

Community Beginner ,
Jul 19, 2017 Jul 19, 2017

How to remove the Play icon on iPhone/iPad when using video component?

TOPICS
How to
20.0K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , Jul 20, 2017 Jul 20, 2017

Quick update: I simply linked a CSS to the HTML file and inserted this code:

*::-webkit-media-controls-panel {

  display: none!important;

  -webkit-appearance: none;

}

*::--webkit-media-controls-play-button {

  display: none!important;

  -webkit-appearance: none;

}

*::-webkit-media-controls-start-playback-button {

  display: none!important;

  -webkit-appearance: none;

}

Thanks for the help guys

Translate
Community Expert ,
Jul 19, 2017 Jul 19, 2017

I'm going to assume this is an HTML5 Canvas document? That component leverages the UI dictated and delivered by the browser - so you'd have to ask Apple

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 19, 2017 Jul 19, 2017

Also though - if you disable the video controls completely, the browser perhaps will not show it - but then you must write all your own controls.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 19, 2017 Jul 19, 2017

Skærmbillede 2017-07-19 kl. 17.27.37.png

Thanks for you answer Joseph, I watched tons of your awesome tutorials at lynda.com

It is an HTML5 Canvas yes, and I completely removed the controls. The Play icon still appears because the video can't autoplay on the devices (iPhone, iPad, and I assume Android phones and tablets aswell).

As you see in the image above, this is the icon I wish to remove. Do you know of anyway to do this?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 19, 2017 Jul 19, 2017

But without a play icon, how would iOS users know it's a video? How would they play it?

Anyway even though this is a terrible idea, apparently it can be done:

Hide Video Play Button on iOS Devices | Web Programmer Blog

Hide iPhone HTML5 video play button - Stack Overflow

The video "component" just generates an HTML video element, so once it's onscreen you can use getElementById to grab it and tweak its styles/properties whatever as you see fit.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 19, 2017 Jul 19, 2017

Hi Clay,

I know it seems odd, but whenever the video can't autoplay, I just want the "Poster-image" from to video component to show, like it does now, just without the play-icon. Thanks for the links, I will check it out!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 20, 2017 Jul 20, 2017
LATEST

Quick update: I simply linked a CSS to the HTML file and inserted this code:

*::-webkit-media-controls-panel {

  display: none!important;

  -webkit-appearance: none;

}

*::--webkit-media-controls-play-button {

  display: none!important;

  -webkit-appearance: none;

}

*::-webkit-media-controls-start-playback-button {

  display: none!important;

  -webkit-appearance: none;

}

Thanks for the help guys

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines