Remove controls by default html5 video elements on resize

[axew3]

I hoped there was a way to resolve via pure CSS the fact, that if a wrapper element of a video element, resize less then the video controls width, then these controls display out of the element, maintaining there own width and like an "inline no-wrap" result.
The unique way i've found that work is via Javascript, maybe with a throttler function, reducing to a reasonable minimum the computation:

Code: Select all

let w3vtp_ve = document.querySelectorAll("video");
(function() {
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function resizeThrottler() {
if ( !resizeTimeout ) {
  resizeTimeout = setTimeout(function() {
  resizeTimeout = null;
  vtpResizeHandler();
  }, 990);
}}
function vtpResizeHandler() {
   if (window.matchMedia("(min-width: 400px)").matches) {
  for (var i = 0, len = w3vtp_ve.length; i < len; i++) {
   	var el = document.getElementById('w3_vtp_recording'+[i]);
   	if(el !== null){
		el.controls = true;
  }
}} else {
	  for (var i = 0, len = w3vtp_ve.length; i < len; i++) {
   	var el = document.getElementById('w3_vtp_recording'+[i]);
   		if(el !== null){
		el.controls = false;
  }
}}
}}());

This code will check and apply the result into any video element found parsing the document.
Anybody can find out a better solution than this?
Of course, yes there is: remove native controls on html5 video element (that is rendered browser by browser in different ways) and add your own styled buttons.
So excluding the above, any possibility more for some css ninja to achieve the same? (i do not think for what i know at date of this post).