Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
jgoldy492

Adding a video background?

Recommended Posts

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

Edited by jgoldy492
Tidy

Share this post


Link to post

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>

alt

Edited by tomoke

Share this post


Link to post

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

Edited by IsaacR

Share this post


Link to post

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

Edited by alanhouser
Use curly apostrophes, fix links

Share this post


Link to post

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:

Background video

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

Video with text overlay

More info: CSS-Tricks Fluid Width Video

Edited by nexus69
Add detail, fix image

Share this post


Link to post

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.

Share this post


Link to post

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!

Share this post


Link to post

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?

Share this post


Link to post

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


💥I'm a Squarespace Professional. Book me if you can.

Share this post


Link to post

@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… %(

Edited by sssuperguy
bankruptcy declaration

💥I'm a Squarespace Professional. Book me if you can.

Share this post


Link to post

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.

Edited by This Guy

Share this post


Link to post

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.

Share this post


Link to post

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

Share this post


Link to post

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

Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post

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

Edited by This Guy

Share this post


Link to post

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

Share this post


Link to post

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; }
}

Share this post


Link to post

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.

alt text

Step 2: Add a Gallery

alt text

Step 3: Add a Video

alt text

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.

alt text

alt text

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.

alt text

Edited by jasonbarone
“YouTube”

  • 🚀Founder at Squarefront, the global community of Squarespace builders.
  • 🎥Documenting the process of building Squarefront on YouTube.
  • 🚗Senior Design Engineer, Design Platform at Uber.
  • 🍕Connect with me on Instagram, Twitter and Linkedin.
  • Need help with Squarespace? I've used the platform for well over 10 years and have helped thousands of businesses, both small and large. Send me an email!

Share this post


Link to post

@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?

Edited by Nicholas Goodden

Olympus ambassador, I produce kick-ass cinemagraphs, video loops & photos for top brands' digital marketing. Feat in Huff Post, Evening Standard & many more.

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...