Darren Crawford

Darren is a guy who loves marketing technology.

Full Width Video Background in OptimizePress 2

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

 

27 Comments

  1. […] Size: Width – About 3 times the width of the box / Height – Enough to wrap around the […]

    • Henry Galamay on March 12, 2016 at 9:19 am

      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?

  2. Nick on April 17, 2015 at 3:40 pm

    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

    • Darren Crawford on April 18, 2015 at 2:09 pm

      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.

      • Nick on May 5, 2015 at 11:00 pm

        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!

        • Darren Crawford on May 6, 2015 at 9:44 am

          You should be able to put the full URL to the S3 link. Just make sure that the video permissions are set to be publicly viewable.

          • Nick on May 6, 2015 at 12:47 pm

            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.



          • Nick on May 6, 2015 at 10:12 pm

            You’ve completely lost me LOL
            Sorry Darren.



          • Nick on May 7, 2015 at 10:15 pm

            YOU ARE A LEGEND!!!!
            Thanks so much for the help Darren 🙂



          • Heather on February 17, 2016 at 1:44 am

            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 on April 19, 2015 at 4:23 am

    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

    • Darren Crawford on April 20, 2015 at 9:10 am

      try adding a SPACER of ~1000 px and see if that fixes it.

  4. Markus on July 8, 2015 at 7:33 am

    Hi Darren,

    the script doesnt work with my youtube link.
    If i use the link to your Polina video it works.
    Where is the problem?

    • Darren Crawford on July 8, 2015 at 7:52 am

      Use the MP4 version of your youtube video on your site and it will work. You can’t replace that link with a youtube (or wistia or vimeo) type link.

  5. allison on July 17, 2015 at 3:35 pm

    was wondering instead of full background, how to make this just inside row 1 or half a page. Thanks

  6. Lise (Digital Narrative) on September 26, 2015 at 6:19 pm

    Great site, Darren! I see that you’re using Thrive Themes but have a category post for OP2. Do you prefer that over Thrive Themes / Content Builder / Leads combo? Would be very interested in hearing your thoughts!

    • Darren Crawford on September 26, 2015 at 7:44 pm

      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).

  7. teiko on October 13, 2015 at 7:49 pm

    Is there anyway to limit this to just one row, as opposed to playing in the entire background?

  8. Al on October 29, 2015 at 11:55 pm

    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!

  9. Kim on January 14, 2016 at 9:35 am

    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

  10. Kim on January 14, 2016 at 10:47 am

    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.

  11. Troy on January 29, 2016 at 12:08 am

    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

  12. Keli on February 4, 2016 at 12:25 pm

    THANK YOU for posting this – BRILLIANT!
    I have the same question as above – I would like it to show in only one row.
    Cheers, Keli

  13. Shawn on March 24, 2016 at 12:19 am

    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

  14. Ivan on March 24, 2016 at 4:32 am

    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

  15. Alexandros on March 28, 2016 at 1:36 pm

    Thank you for this it was really helpful.
    Is there a way to make the background video to play in a row (section) only instead of the whole page?

Leave a Comment