- Posts
Hello there,
I’m finally getting around to making a website for my company. Dreading it actually (I’m a total noob to any web design). But, to be honest I’m linking BoldGrid a lot. So far, I’m happy with my latest version. My using the Crio template because it can play a video in the BG (the header at least, would love to just playa video in the BG on the home page but it won’t let me, static images only). My goal is to have a sizzle video playing quite large (would love to play the video at the maximum size for a video file at 2000×1200). I’ve run into two problems:
1. I first created a custom header to replace the default header in Crio. Big problem is I can’t use a BG video in any of the custom headers. I tested every demo one and it doesn’t play, ONLY the customizer header plays video in Crio. Can I get this function to work with my custom headers? This would be be preferred method since there’s way more options to have the logo, menus & titles. I just drag the bottom of the header down to make it the size I want. I’m happy with my custom header I created but it won’t play the BG video, only a static image 🙁
2. Onto trying to use the customizer header, I can get the header to play the video (as expected) but I can’t change the size of the header at all with any of the customizer settings. Also I’m limited on what shows up in the customizer header (just menus, logo stuff & widgets options in one single row). After banging my head for hours, I found a css command (added to the css editor for Crio) to change the size of the header (you can see it live at my website). With this option, I crop (I believe I’m just covering the top of my home page with my giant header) out the top of my home page so it looks like there’s a standard transparent header floating over a video BG home page (currently published). Problem is I can’t put anything over this since the default header is pretty limited. Is this even the correct thing to do? Again, I’m a total noob (used to high end 3D software ;P).
Any help would be greatly appreciated. In a perfect world, having the BG of the home page looping the video would be the best option correct? Can that even be done? I’m trying to emulate this site to get a better idea http://www.ianimate.net. Man, my head hurts……
Thank you in advance for any help,
Jason
Hi Jason-
Thanks for reaching out! You can accomplish this using the Crio Pro WordPress theme, but it does take a little extra legwork to get it just right.
This is a pretty common question, and it’s a little easier to show you than to explain everything, so I took some time to record this video tutorial for you and anyone else who wants to make a full-screen video background header, if you have about 13 minutes to watch.
Here’s the codes that were used in the video:
Shortcode:[vidbg container=".video-bg" webm="https://example.com/video.webm" poster="https://example.com/poster.png" overlay="true"]CSS:
.video-bg, .video-bg-cta { height: 100vh; }And a link to the Video Background Plugin and the documentation for the shortcode.
Hi Jesse,
Holy shit, you’re awesome! I’ve been banging my head for the past week trying to get this to work. I think I tried over 10 plugins with no luck. It’s funny because I had the most success using the same plugin however I just couldn’t get it right. Almost gave up but I thought maybe someone answered my post here. Lo and behold, you answered my dilemma with an amazing video (I didn’t have email replies on, derp). Thank you so much! This worked beautifully. Followed your directions and got exactly what I was looking for. Perfection! You can check it out animcopilot.com. The logo and video is temp but finally got it looking right. Thanks again Jessie. It was pretty intimating making a site for the first time but Boldgrid and the team made it manageable (the main reason I went with InMotion Hosting initially).
One quick question, the video doesn’t play on my iPhone 11 (just getting my poster that you told me to set). Is that the limitation of the plugin? My guess it doesn’t support IOS? It looks fine when clicking mobile view in Boldgrid. I plan to check my site on different OS’s and browsers. It’s not a deal breaker. Most traffic I’ll get are animators on their workstations.
Jesse, you’re a gentleman and a scholar!
Jason
Hi Jason-
It’s looking great! iOS Safari disables video backgrounds and even some image background effects like parallax scrolling, ostensibly because it uses too much of the phone’s resources and because the Webkit team feels strongly that videos should only play after a user interaction.
I know that there are some “hacks” out there to get around it, but they involve some more advanced coding skills.
One thing you should definitely do is to set the poster image. For example, here’s what my example from the video looks like on an iPhone:
You could even consider doing a well-optimized GIF as the poster to achieve a similar effect for your mobile visitors, but be very careful about the filesize if you do. GIF’s are extremely inefficient for animation.
- The topic ‘Full Size Header Background Video’ is closed to new replies.
