Scale a HTML5 video to fill the screen, ignoring ratio.

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
flywheeljack
 
 
Posts: 1
Joined: Wed Sep 13, 2017 6:59 pm

Scale a HTML5 video to fill the screen, ignoring ratio.

Post by flywheeljack » Wed Sep 13, 2017 7:10 pm

Hi everyone,

I am building a responsive site and I have all the pieces done, but I am having trouble with the video background.

For smaller screen sizes I want the video to essentially zoom/scale to fill the screen. Right now the video will fill the width but maintain its aspect ratio which creates the top and bottom horizontal bars.

I know scaling can be done to fill to the top and bottom if I was coding this from scratch(which I don't know how to do).

Using WWB how do I get the video to fill the top and bottom and then hide the horizontal bits that go off the edges. I am only asking this after hours of messing and re-uploading and testing with MediaPlayer, layers etc.

Any help would be much appreciated.

User avatar
Pablo
 
Posts: 18443
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Scale a HTML5 video to fill the screen, ignoring ratio.

Post by Pablo » Wed Sep 13, 2017 9:05 pm

There is no standard solution for this, the background video option was designed to keep the aspect ratio.
You will need to solve this with custom code or check out this extension:
viewtopic.php?f=53&t=69905

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests