The Blog of Darren Crawford

Full Width Video Background in OptimizePress 2

Home » Full Width Video Background in OptimizePress 2

Full Width Video Background in OptimizePress 2

January 27, 2015 / Darren Crawford / 29 Comments

Create a custom HTML element in your OP2 page and add the following to it:

<video id="bgvid" poster="video.jpg" autoplay="autoplay" loop="loop" width="300" height="150">
 <source src="YOURVIDEO.mp4" type="video/mp4" />
 </video>

Of course, replace with your video link.

Then in your PAGE SETTINGS > OTHER SCRIPTS add a Custom CSS section and paste:

video#bgvid {
 position: fixed; right: 0; bottom: 0;
 min-width: 100%; min-height: 100%;
 width: auto; height: auto; z-index: -100;
 background: url(video.jpg) no-repeat;
 background-size: cover;
 }
@media screen and (max-device-width: 800px) {
 html { background: url(video.jpg) #000 no-repeat center center fixed; }
 #bgvid { display: none; }
 }

 

Save everything and then view the page.  It should have a full video background.

Adapted for OptimizePress2 from http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

 

Posted in ,

Darren Crawford

Darren is a guy who loves marketing technology.

29 thoughts on “Full Width Video Background in OptimizePress 2”

  1. Pingback: Japanese Gift Wrapping ~Kimono Style with a Heart Shaped Message Card~ - Fileflee.com

    1. Henry Galamay

      I am using Blank template with black optin box. I want to use a different background image. I uploaded via page builder, background image, but still it won t show up?

      Reply
  2. Nick

    Can this be done on a row by row basis?
    I tried adding the code with a youtube video and it didn’t work.
    Any help with this would be amazing.

    Cheers,

    Nick

    Reply
    1. Darren Crawford

      I’ve not tried it with a youtube video. Try it with videos that you can directly link to – not embed codes.

      Then you’ll probably have to create multiple id tags like: videobg1 and videobg2 Then you could probably call them from the specific row/element.

      Reply
      1. Nick

        Hi Darren,

        I have a video in my Amazon S3 account I want on a row on my home page. Do you know how to do that?
        Im new at this so any help would be amazing!

        Reply
          1. Nick

            And how do I apply that to the 1st row on the home page? Im sorry if Im annoying you Darren I just have zero idea about code.

          5. Heather

            Darren – so I got the code and downloaded and watched the video. Brilliant! And, it’s still applying a video background to the full page, not just a row. Any insights?

            Thanks,
            Heather

  3. Mark

    Hi Darren

    I followed your instructions and ended up with the shallow trip at the top of the page playing the video. See URL:

    Any advice?

    Regards

    Mark

    Reply
    1. Darren Crawford

      I use both. I don’t care for the functionality of the Thrive Builder (yet). I found it a bit too buggy and cumbersome. I often use Thrive themes for the blog portion and the Flatsome Theme for sites that are using WooCommerce (which has become my main shopping/membership platform along with OP2).

      Reply
  8. Al

    Hi Darren,

    I’ve referenced this page a few times and have found it extremely helpful. Quick question, would it be possible to keep the video at the top of the page as a background, while having other elements below, continuing with content. I happen to be using OptimizePress as a theme for wordpress. I was able to get the whole page video background with your help with codes above, but Im trying to achieve something closer to these two examples:

    http://www.keypathedu.com/en

    http://www.macmillannewventures.com

    Thanks for any input and feedback – again, greatly appreciate this post – I’ve gotten further than I would have thought.

    Thanks again!

    Reply
  9. Kim

    Hi

    I followed the instruction above. I’m getting the section I can only see a small portion of the video. I can hear it but how do I adjust the height and also need to center video.

    How do I add the image link. Inside inside of parentheses or out side.
    How do I adjust the height so I can see the entire video.

    Thank You

    Kim

    Reply
  10. Kim

    Hi Daren,

    I was able to get a full page video. However how can I get this to play in one section like in
    a row instead of a full page. As if strolling down and the video in center section.

    It keep wanting to display the entire video.

    Thank You

    Kim D.

    Reply
  11. Troy

    Hi Darren,

    Thank you so much for this excellent solution.

    allison, teiko and kim have already asked this and I wanted to throw my request in as well.

    Is there an equally simple / elegant way to have the video play in the background of just one row?

    Currently I am just changing the color of the sections that I do not want to have a video background and that is working well. I was just curious as to whether there was a better way.

    Many thanks for your contribution,

    Troy

    Reply
  13. Shawn

    Darren,

    Seems like there’s a lot of people asking about only using video in on row. I as well am inquiring about that. Can you please answer the masses and let us know if you’ve figured out how to do that? If not, completely understand. Thanks in advance for your reply!

    Shawn

    Reply
  14. Ivan

    Hi Darren
    Your solution for the video background is amazing. I have a problem: The video background is working when the page is a draft and I do the preview but as soon as I publish the page the video background doesn’t work anymore and I can see only the background color.
    Any idea?
    Thanks in advance
    Ivan

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Let's connect.

Contact Me
Scroll to Top