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

Adding a video background?


Go to solution Solved by jasonbarone,

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
Link to post
  • 1 month later...
  • Replies 65
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 month later...

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
Link to post
  • 1 month later...

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
Link to post
  • 2 weeks later...

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

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!

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?

Link to post
  • 4 weeks later...
  • 2 months later...

@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
Link to post
  • 2 months later...
Guest

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

Link to post
Guest

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

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

Link to post
Guest

@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 Guest
Link to post
  • 3 weeks later...
  • 3 months later...
Guest

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

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

Link to post
Guest

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

Link to post
  • 1 month later...

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. I'm building products and services for the Squarespace platform and documenting everything on YouTube. I've been working with the platform since 2008 and my work with Squarespace led to me being hired by Uber where I spent over 5 years working on the web, design and content platform teams. 

Need help with Squarespace? Send me an email! Otherwise connect with me on TwitterInstagram, or Linkedin.

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.

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

×
×
  • Create New...