Remove controls by default html5 video elements on resize

Post a reply


This question is a means of preventing automated form submissions by spambots.
Smilies
:D :) ;) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :| :mrgreen: :geek: :ugeek:

BBCode is ON
[img] is ON
[url] is ON
Smilies are ON

Topic review
   

If you wish to attach one or more files enter the details below.

Maximum filesize per attachment: 1 MiB.

Expand view Topic review: Remove controls by default html5 video elements on resize

Remove controls by default html5 video elements on resize

by axew3 » Sat Apr 21, 2018 7:56 am

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).

Top