Adding a video background?

I am trying to make a landing page in a similar style to this one:http://gravitymovie.warnerbros.com/

I am wondering if there are any methods y’all have found for creating compelling looping video backgrounds with Squarespace. I am currently using the Frontrow template and would love to loop video in the background.

Any help would be hugely appreciated!

-Jimmy

This isn't quite the same but it's relatively easy to do with an animated gif. Just insert paste this into the Page Header Code Injection:

<style>
body {
 background-image: url(https://yourgifname.gif);
 background-color:#fff;
}
</style>

After tinkering around a lot today I was able to get this up and running for a site I’m working on. It’s definitely not perfect yet, but it’s a start www.squarespacedesigners.com

Don’t use an animated gif. That’s a very bad idea.

This can be done with video, but there’s many steps to make it work correctly. (example below)

Key Points:

1. The video filesize needs to be small enough that it will load without too many glitches.
2. The video won’t load in iOS, so you need to detect and use overrides for the tablet/mobile experience.
3. There are varying formats, depending on which browser is loading the content, so a good rule of thumb is to encode MP4, OGV and WEBM formats and make them all available within your code.
4. If you’re wanting to use this on an existing Squarespace template, depending on the template being used, there will be a good amount of customization involved.

Example Site: Feld Direct

*by saying video won't load in iOS, I mean it won't load in the background. In iOS, background video acts like a regular inline video with a play button, which kills the whole idea.

An easy solution for integrating a fullscreen video background from YouTube or Vimeo.

In your page go to Settings > Advanced and paste in this code:

<div style="position: fixed; z-index: 1000; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%" 
src="https://www.youtube.com/embed/aQsy17K84Ls?
autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>

Note: Change the Video-ID to the unique YouTube video identifier

src="https://www.youtube.com/embed/ Video-ID

An example:

You can also write a text over the video, just change the z-index in the code, for example from 1000 to 50.

More info: CSS-Tricks Fluid Width Video

I sent a message in the contact section of squareflair.com concerning hiring you to do this on my site...still awaiting reply...am very interested s please let me know.

thank you for this info but i have a couple problems. While i DID get the video to play, (1) It only plays once...is there a way to loop it? (2)i ONLY see the video and not any of the other elements I created on the page, like the menu etc. What can i do to make the video only be in the BACKGROUND of everything else? i tried changing the z-index to 50 but i only see the video ONLY on the page. Please help!

Do you think the video not showing as background has to do with the template I am using? Is there any template you would recommend where it will surely work and STILL show the other elements inserted on the page?

If I would like to do it myself, could you share a guide? (:

@Jan21 : quite nice but it just tiles the gif endlessly instead of spanning the container. And there is nothing to see on mobile since the gif is displayed BELOW the footer ( in Marquée ).

@djdzl here is how: you have to set a repeating playlist after the loop parameter.

To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL:

http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID

Of course this doesn't solve the problem with the iOS issue… %(

This is all great. But what if the video is an intro? Is there a way to automatically advance to a background image after the video completes? Or easier yet I can set the back ground image with the following code:

<style>
body:not(.collection-type-index):not(.collection-type-gallery) {
 background-image: none;
 background-image:url('http://static.squarespace.com/static/yourfile.jpg');
 background-position: top center;
 background-size: cover;
 background-attachment: scroll;
 background-repeat: no-repeat;
} 
</style>

This image can be revealed after the video plays if there is a way to hide the video AFTER it plays. Anyone know how to do this?

-ALSO-

What if you want BG sound for your regular website to play after the video ends as well? If we are loading to a new page this isn't a concern unless we are just hiding the played video. I would prefer to advance to a new page after the video ends.

You could turn sound on (on a background video you typically want to keep the audio off – and it's coded this way intentionally). You can also turn off the looping of the video— making it only play once. These things are all possible, but then it wouldn't be a "background" video. It would just be a video. So – yes! Entirely possible.

@alanhouser I fully understand those components. I am trying to use the BG vid as an intro to the client's site, then advance to the main homepage.

I was able to get the video only play once with the sound on, but When it ends, I need to push to the next page.

@This Guy, you can use scripting and the YouTube API to go to another page once the video ends.

Essentially, you connect to the API, set up a listener that checks for the video ending, and then fire off a function to go to the next page. These should provide lots of the info you need: YouTube API, end of video, load a function and YouTube: Subscribing to Events.

@silvabokis I am not to aware of how to use jQuery and the YouTube API. This is the code they are suggesting to add:

function onYouTubePlayerReady(playerId) {
 ytplayer = document.getElementById("myytplayer");
 ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
  alert("Player's new state: " + newState);
}

And:

function onytplayerStateChange(newState) {
  if ( newState == 0 ) {
    /* load next video */
 }
}

I am not sure where this goes or how to bind the video to link to the next page however.

Is there a way to add video background for Adversary template?

Just like on this template’s website - http://www.squarespace.com/seven/templates/

Hey thanks guys for the great insight

-I'm trying to put my index and png logo over the video, buy only the indexes show and no logo. I place the 50-100 over the Z-index. but still no logo. would you happen to have a suggestion?

-I'm looking to have pretty much the same page as this http://aldernyc.com/ryepastafilm/but my video automatically doesnt go to a full size as this video eventhough I place the ratio at 100% on height and 100% width. If I grow the percentage it goes off right of the screen,If anyone has any insight would be amazing.Many thnaks best

Does anyone know how to get around the issues with mobile when using the Page Header Code Injector to insert a video in the background?

Tried the following in an attempt to block the div (div id="bg") when accessed by a mobile device, but that did not work. I have know idea what I am really doing.

@media screen and (max-width: 500px) {
 #bg { display: none; }
 .mobile-hide{ display: none; }
}

Hey Nexus,

I noticed in the second picture you got some text overlaid over your video, I'd love to know how to do that! Any advice would be hugely appreciated, thanks.

Jamie

Here's a detailed tutorial on how to do this with a looping video (not gif). Code snippets are included so you can copy-paste. Hope it helps!

Creating video backgrounds in Squarespace 7

I noticed this thread surfaced again so I wanted to throw a simple, less technical idea for anyone who's not comfortable with coding. Here's a way to install background video into templates that have "Index" collections (Hudson, Pacific, etc).

Index pages normally support Galleries, and if you only use one image/video in a gallery, it will normally span the entire width of the website. Also, Index pages will normally have a feature built-in that lets the navigation stay visible on top of the image/video if the Gallery happens to be the top position. This tutorial plays into that behavior.

Step 1: Pick a template with an Index

I picked Hudson. The Index is already there.

Step 2: Add a Gallery

Step 3: Add a Video

Step 4: Use Wistia.com or YouTube

I uploaded my video, chose the following settings, and copied my embed code into the video in Step 3. I recommend Wistia.com because the built-in player has all the options you need, available with simple checkboxes. Vimeo could also be used, but if you use Vimeo's video player, they are firm about the inability to hide various items that appear on the video player. Wistia on the other hand, offers full control. YouTube also offers full control, but the process to get the correct code can be confusing because it requires using "video parameter" settings. This is the best article I have to explain: http://squarefront.com/addons/youtube-video-parameters, although it probably needs to be updated.

And here it is, working on a completely default template. I do realize that many people want an editable content area to appear on top of the video. That is possible, with coding. I'll try to find a simple way to do that to extend the tutorial further.

@jasonbarone Do you work for Wistia? No just wondering because your post is very attractive, yet there is a bit of a fee associated with your solution if I'm not mistaken... Or does that work fine with their free option?

All of the solutions above are free of charge.