1

[please refer attached scrnshot, i want to remove play/pause icon which i'm pointing] [scrnshot] How to remove/hide only play/pause icon/button from video tag's media player. As i'm adding controls attribute dynamically using jquery. It gives all icons, i want to hide/remove only play/pause button not other(i.e. want Fullscreen icon mandatory). Is there any solution for this??

Below is the code for adding controls attribute to video tag dynamically

showVideoControls() {
  var elem = document.getElementById("remote_video");
  if (elem.requestFullscreen) {
    $("video").attr("controls",true);
  }
}
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Ashutosh Patil
  • 13
  • 1
  • 4
  • This is a great question. I would also like to know the answer for this. Haven't ever thought about it before. – MrVanilla Oct 11 '19 at 05:10

2 Answers2

0

One way to resolve this issue would be targeting the childs of the container your video is displayed in. Apply styles on the video and apply property like. Depends on what child you are targeting.

.video:first-child {
  display: none;
}

and if you know for sure that it is an image or link, you can do something like

.video img {
  display: none;
}
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
MubashirEbad
  • 289
  • 1
  • 7
  • i want only fullscreen icon on video Tag's media player – Ashutosh Patil Oct 11 '19 at 07:28
  • Then you can remove all the childrens of that tag using .video * { display: none; } and only leave the last child as .video:last-child() { display: initial; } – MubashirEbad Oct 11 '19 at 10:18
  • it's not working, tried here https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_controls – Ashutosh Patil Oct 11 '19 at 13:39
  • Looks like we can't access the childs of the video tag of HTML. We cannot modify them. Another approach would be to have a custom play pause button and control the events with JavaScript. – MubashirEbad Oct 14 '19 at 06:57
  • the requirement is, i want to expand the screen size of video to full when required. i'm getting the video tag dynamically, so i added controls attribute to video tag dynamically using jquery. I don't want that play/pause icon, so i'm trying to remove those icons. Is there any solution for fullscreen option and then exit the fullscreen ???? – Ashutosh Patil Oct 14 '19 at 09:14
  • [https://stackoverflow.com/questions/1055214/is-there-a-way-to-make-html5-video-fullscreen] Please look into the above link. – MubashirEbad Oct 14 '19 at 09:20
  • Also you can use `webkitEnterFullScreen();` to go into full screen. Will work fine in Firefox and Chrome. – MubashirEbad Oct 14 '19 at 09:21
0
style="pointer-events: none;"

However, this removes everything including the enlarge icon.

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Tebogo
  • 1
  • 1