hide html5 video controls with css?

Question

I have a html5 video section as below and I want to hide the controls. I have made the video div clickable to show a 'modal' layer which plays the video in a larger size. I have done the coding to open the 'modal' and play the video OK. Is there a way to hide the controls with css, so I can make them visible again for responsive design?

<video id="sampleMovie2" controls>
<source src="video.mp4" type="video/mp4" />
</video>

Answer 1

If you created your controls with HTML elements and bound your controls to the video using JS than yes, using CSS you could target the desired device media width and hide those elements.

Otherwise no.
But using JS you can toggle the controls property depending on the window width:

jsBin demo

var $vid = $("#sampleMovie2");

function showControlsAt600() {
    $vid.prop( "controls", $(window).width() >= 600 );
}


showControlsAt600();
$(window).on("resize", showControlsAt600);