Video to stretch across the entire homepage

Question

Video to stretch across the entire homepage

916 Networks

2018年4月19日 15:20

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

Topic video-header responsive homepage customization Wordpress

Category Web

lavekyl · Accepted Answer · 2018年4月19日 15:20

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%;
}

HU ist Sebastian · Accepted Answer · 2018年4月19日 06:45

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!

Video to stretch across the entire homepage

About