1

Where could I find a framework for a homepage where I can have an HTML video stretched all the way across (to a certain max resolution would be fine, like max-width: 2500px or something)?

I am using a TwentyTwelve theme I customized. All I need is a top header bar for logo and nav (100px tall) and a footer of the same size. The rest of the screen can be the video.

This is kind of what I have as a simple base to start. Defining the #page width as something large seems to fill the screen. The rest of the elements inside are set to width: 100% by default so that seems fine too. Just can't seem to make the video stretch and fill the parent div.

Thanks!

<div id="page" style="width: 2400px; max-width: 2500px;">
    <header>
         <!-- Logo and nav here -->
    </header>

    <div id="main" class="wrapper">
      <video id="video_688987199_html5_api" class="vjs-tech" preload="auto" autoplay="" data-setup="{}" src="/wp-content/uploads/2018/04/video.mp4" poster="null">
         <source src="/wp-content/uploads/2018/04/video.webm" type="video/webm">
      </video>
    </div>
</div>

closed as off-topic by Krzysiek Dróżdż, Michael, kraftner, Nathan Johnson, Jacob Peattie Apr 20 '18 at 7:49

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

1

You could add negative margins to the video element.

If inline (adjust as needed):

<video id="video_688987199_html5_api" class="vjs-tech" preload="auto" autoplay="" data-setup="{}" src="/wp-content/uploads/2018/04/video.mp4" poster="null" style="margin-left: -50px; margin-right: -50px;">

If in stylesheet (again... adjust as needed):

.vjs-tech {
  margin-left: -50px;
  margin-right: -50px;
}

Another option is to set the width as something greater than the parent div's width. You would need to adjust the left margin of the element as well.

Inline (adjust as needed):

<video id="video_688987199_html5_api" class="vjs-tech" preload="auto" autoplay="" data-setup="{}" src="/wp-content/uploads/2018/04/video.mp4" poster="null" style="margin-left: -50px; width: 120%;">

If in stylesheet (again... adjust as needed):

.vjs-tech {
  margin-left: -50px;
  width: 120%;
}
  • thanks for the reply. What would that do though? That wouldn't get the video element to stretch full screen right, just reduce the side margins on the frame? – 916 Networks Apr 19 '18 at 5:01
  • This would stretch the element past the parent div's padding. You could also set a width of something more than the container width on that element and then adjust padding accordingly. I'll update my answer with that. – lavekyl Apr 19 '18 at 15:15
  • Oh I see. That makes sense. I tried that out, and it did work - i did end up using a slightly different solution but what I asked for is what you gave me. Thanks! – 916 Networks Apr 20 '18 at 4:15
1

If you got your to-be-stretched Element in a Wrapper that has a fixed width like

.wrapper {
     width:1200px;
     margin:0 auto;
}

or something like that, you can use the viewport-width unit for css. Try it like this:

#main .vjs-tech {
     width:100vw; //Make as wide as the screen viewport
     height:auto; //Keep Aspect Ratio
     display:block;
     left:50%; //the left edge of the video is now in the center
     margin-left:-50vw; //move the video 50% of the viewport width to the left
}
#page {
     overflow-x:hidden; //if there is a vertical scroll bar, don't show the horizontal one
}

Happy Coding!

Not the answer you're looking for? Browse other questions tagged or ask your own question.