Title: Hero video
Last modified: March 19, 2019

---

# Hero video

 *  Resolved [Daniel](https://wordpress.org/support/users/marketinggreenpaint/)
 * (@marketinggreenpaint)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/hero-video/)
 * Currently I just created a full width page(no plugins) and added a native video
   with full width aswell, the video dimensions are 1920×450 with NO BLACK BARS 
   but it still doesnt touch the sides of the screen, it leaves a margin.
    The video
   is on the main page body. [The page sits like this at the moment](https://imgur.com/K163prP)
 * I belive what I want is called a Hero Video, the video touching both sides of
   the screen and responsive to mobile devices. This is the further I could go.
   
   Any ideas?
 * Thank you in advance,
    Daniel
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fhero-video%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  Thread Starter [Daniel](https://wordpress.org/support/users/marketinggreenpaint/)
 * (@marketinggreenpaint)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/hero-video/#post-11331075)
 * There are situations in life that we cant understand… So, I have been looking
   for this solution for 2-3 weeks now.
    The solution, at least works for me, is
   as follows:
 * HTML on page
 *     ```
       <div id="hero">
       <video playsinline="" autoplay="" muted="" loop="" poster="placeholder.jpg" id="bgvideo" width="x" height="y">
       <source src="LINK TO SOURCE" type="video/mp4">
       </video>
       </div>
       ```
   
 * CSS on Appearence > Customize > Additional CSS
 *     ```
       video#bgvideo {
       position: absolute;
       top: 39%;
       left: 50%;
       min-width: 100%;
       min-height: 100%;
       width: auto;
       height: auto;
       z-index: -100;
       -ms-transform: translateX(-50%) translateY(-50%);
       -moz-transform: translateX(-50%) translateY(-50%);
       -webkit-transform: translateX(-50%) translateY(-50%);
       transform: translateX(-50%) translateY(-50%);
       }
       ```
   
 * After this HTML and CSS codes, all I had to do was “push” my content DOWN, because
   on my personal page the content was on TOP of the video due to it being a Hero
   Background Video.
    Hope this helps anyone else looking for the same.

Viewing 1 replies (of 1 total)

The topic ‘Hero video’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/storefront/4.6.2/screenshot.png)
 * Storefront
 * [Support Threads](https://wordpress.org/support/theme/storefront/)
 * [Active Topics](https://wordpress.org/support/theme/storefront/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/storefront/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/storefront/reviews/)

## Tags

 * [full-width](https://wordpress.org/support/topic-tag/full-width/)
 * [hero video](https://wordpress.org/support/topic-tag/hero-video/)
 * [video](https://wordpress.org/support/topic-tag/video/)

 * 1 reply
 * 1 participant
 * Last reply from: [Daniel](https://wordpress.org/support/users/marketinggreenpaint/)
 * Last activity: [7 years, 1 month ago](https://wordpress.org/support/topic/hero-video/#post-11331075)
 * Status: resolved