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
[…] Size: Width – About 3 times the width of the box / Height – Enough to wrap around the […]
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?
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
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.
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!
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.
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.
You’ve completely lost me LOL
Sorry Darren.
Nick — does this video help? https://s3-us-west-2.amazonaws.com/darrencrawford.com/Full_Video_Background_OP2.mp4
YOU ARE A LEGEND!!!!
Thanks so much for the help Darren 🙂
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
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
try adding a SPACER of ~1000 px and see if that fixes it.
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?
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.
was wondering instead of full background, how to make this just inside row 1 or half a page. Thanks
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!
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).
Is there anyway to limit this to just one row, as opposed to playing in the entire background?
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!
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
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.
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
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
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
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
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?