Databases
StackOverflow2013
Postsdbo
POHow to make video resize by using html5 element?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make video resize by using html5 element?
    text
    copied!<p>I am trying to show a video on fullscreen. I am using html5 element and code is below .</p> <p>javascript code</p> <pre><code>$('document').ready(function() { var o_vid_width=$('#vid1').width(); var o_vid_height=$('#vid1').height(); alert(o_vid_width);// output 300px var height = $(window).height(); var width = $(window).width(); alert(width)// //output 1280 if(o_vid_width&lt;=width){ o_vid_width=width ; alert(o_vid_height)// out put 150 px } }); </code></pre> <p>HTML Code</p> <pre><code>&lt;video id="vid1" autoplay loop &gt; &lt;source src="viedos/viedo.mp4" type="video/mp4" &gt; &lt;source src="viedos/viedo.ogg" type="video/ogg" &gt; Your browser does not support the video tag. &lt;/video&gt; </code></pre> <p>In above code I am trying to reassign the value of my window width to o_vid_width ,it should be 1280px; but it giving me 150 . I dont know why it behaving strange?</p> <p>// I tried below code also even it showing margins on both side .I want that it would cover whole window and when I decrease the size even that it will be shown at whole windows no margins. var min_w = 300; // minimum video width allowed var vid_w_orig; // original video dimensions var vid_h_orig;</p> <p>jQuery(function() { // runs after DOM has loaded</p> <pre><code>vid_w_orig = parseInt(jQuery('video').attr('width')); vid_h_orig = parseInt(jQuery('video').attr('height')); jQuery(window).resize(function () { resizeToCover(); }); jQuery(window).trigger('resize'); </code></pre> <p>});</p> <p>function resizeToCover() {</p> <pre><code>// set the video viewport to the window size jQuery('#vid1').width(jQuery(window).width()); jQuery('#vid1').height(jQuery(window).height()); // use largest scale factor of horizontal/vertical var scale_h = jQuery(window).width() / vid_w_orig; var scale_v = jQuery(window).height() / vid_h_orig; var scale = scale_h &gt; scale_v ? scale_h : scale_v; // don't allow scaled width &lt; minimum video width if (scale * vid_w_orig &lt; min_w) {scale = min_w / vid_w_orig;}; // now scale the video jQuery('video').width(scale * vid_w_orig); jQuery('video').height(scale * vid_h_orig); </code></pre> <p>}</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload