Hero video

  • Resolved Daniel

    (@marketinggreenpaint)


    5 years, 8 months ago

    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

    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 to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter Daniel

    (@marketinggreenpaint)

    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.