How to hide video controls

Question

I have the following code where if you click on the button "Full Size" it opens a new tab and plays a mp4 video. However I can´t seem to figure out how to hide the controls of that video since I don´t have a video tag.

<div class="artworkProject">
 <img src="{{ site.baseurl }}/assets/img/artwork/008">
 <div class="artworkProjectOverlay">
  <p class="artworkProjectOverlayTitle">#008</p>
  <p class="artworkProjectOverlayDate">21.07.2018</p>
  <a href="{{ site.baseurl }}/assets/img/artwork/008.mp4" target="_blank">
   <p class="artworkProjectOverlayButton">Full Size</p>
   <span class="artworkProjectLink"></span>
  </a>
 </div>
</div>

score 0 · Answer 1 · answered Jul 20 '18 at 22:24

Those controls are native to chrome. If you want to have a much easier time, play the video in the current window, and set it to fullscreen or whatever size desired.

Also you can explore this option: https://css-tricks.com/custom-controls-in-html5-video-full-screen/

score 0 · Answer 2 · answered Jul 24 '18 at 09:47

If you definitely do need or want to have the link open a new page, the easiest thing may be to simply have the link point to a simply HTML page along with the video name or url you want to play.

This allows you use the regular HTML5 video tag on the page you link to, allowing you use the usual attributes to control whether you have the controls or not.

You can see a working example here showing the javascript to access the URL parameter and use it to set the video source in the HTML5 video tag (linking rather than reproducing again this is a comprehensive example with checks for landing on the page by mistake): https://stackoverflow.com/a/28399606/334402

How to hide video controls

2 Answers2