Animated GIFs versus videos on background

#1

Continuing the discussion from Using a gallery instead of the template banner:

I can't think of any good way that would be worth the trouble.

Squarespace limits images to 20mb, even if GIFs could be much bigger.

For your actually pretty good idea, you'd need at least 2 complicated things done:

  • Script to precisely change one gif for another. It might be quite hard to sync and it can easily lose sync because there's no control over the gif playback.
  • Make the many GIFs properly synced. You probably have the files in video format first.

Maybe the best bet if you want to insist on going GIF would be using a smaller size, even much smaller than 320x200

Meanwhile...

When using a video there's no sync needed and no gif making process. And the script to use the video is also much simpler than a script to properly and quickly change gifs with precision.

I'd say the only real downside on going video is uploading it to vimeo, youtube or some good streaming service.

That's generally a tricky question. It could be as simple as less than 1h and just adding this script:

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

Or quite complicated, while still being less than 2 hours, such as adding it as a full background with a text overlay on top, as seen in gravity or the one you had for instance.

And then for costs, you know the drill. As I promised you, I can keep ya on the old table up to April 18th. Summing it up, it should cost no more than U$ 84.

Using a gallery instead of the template banner
#2

Excellent solution Caue.

I will clear this with the client and then get back with you. Additionally on this same site I want to make the three icons on the top of the "company" page into buttons that change when scrolled over (I would provide you the two image files for each button). This is kind of like that one project we both looked at before (image attached of what I mean by scroll over/changing buttons)

When you have a moment, please let me know the cost of this and we will probably just have you do both projects (the video and the scroll over buttons) at once.

Thanks so much! Kate

image.png1205x706 459 KB

#3

If you need me to make it, raise it up to 4 hours maximum. Because if you can't make it using the code below, means I probably will have to do something different.

I actually have already done precisely that for a client before. He used exactly that very same screenshot (file named Capture d’écran 2015-02-12 à 11.20.37) on his request. I guess you found it on the same web place, maybe on squarespace answers, but I couldn't find it. stuck_out_tongue

Also, maybe I can come up with a better and less hackish way of doing it... Maybe using a gallery block... Anyway...

Feel free to just use that script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script author="cregox.com">
  // mouse hover image
  // - put in a squarespace image element next to each other
  // - the first one has to have a link (clickthrough url)
  $(document).ready(function(){
    $(sqsimg).has('a').has('img').each(function(){
      var $this = $(this);
      var $next = $this.next(sqsimg).has('img');
      if ($next.length > 0) {
        $next.hide();
        
        // copy a from this into next
        $this.find('a').clone().appendTo($next.find('img').parent('div').parent());
        $next.find('a').children().remove();
        $next.find('img').parent('div').appendTo($next.find('a'));
        
        // make toggling by using hide and show
        var toggleNext = function(){
          $next.toggle();
          $this.toggle();
          swapNodes($next[0], $this[0]);
        };
        $this.find('img').parent('div').mouseenter(toggleNext);
        $next.find('img').parent('div').mouseleave(toggleNext);
      }
    });
  });
  
  function swapNodes(a, b) {
    if (!a || !b) {
      console.warn("Some node was null or empty");
      return;
    }
    var aparent = a.parentNode;
    var asibling = a.nextSibling === b ? a : a.nextSibling;
    b.parentNode.insertBefore(a, b);
    aparent.insertBefore(b, asibling);
  }
</script>
#4

Awesome, thanks!

#5

Is there any draw back with making but a video instead of a GIF? Will it load slower?

Thanks! Kate

#6

In practice, it loads faster because videos have better compression and so files are smaller. The biggest bottleneck for loading a website is still the downstream... But, since it loads so much faster, we usually make videos resolution much bigger and the result might seem like a slower loading while, in fact, we're just loading so much more content (through resolution quality).

GIF is a very old standard (never really meant to play videos, it can never contain audio) and it's only still around because of its simplicity through limitations. It's almost like twitter for videos. It limits how much you can put in a file so it has to be small and it then becomes easier to share. Then it also became a standard recognizable in many different medias but... Even still not as much as some true video formats such as MPEG.

#7

Will the video play automatically when someone visits the site, or will they have to click play? I would like to have it on a loop

#8

Coding is basically always more complicated and complex than it may seem.

Adding a button to click to play, for any background video, is actually harder than having it on autoplay. Removing the youtube autoplay is simple enough, but then the button will also stay on the background and can be overlaid or hard to click.

For looping or "auto playing" will also depend where it's hosted and how it's embedded. That first code is made for youtube and using page injection (which makes more sense than a code block or global injection). It's already on autoplay but without loop. Making it loop on that setting is simple enough, just a &loop=1&playlist=[SAME-ID] on that url...

But that loop won't work very well as it will only loop while you have the page on focus. If you leave it open, go somewhere and get back you may find that dreadful end of youtube video with more options to play. I'm not satisfied with this loop solution, offered by youtube, so maybe I'd have to find yet another way, personally.

For instance, muting the volume at other hand is much more complex. So, since it's your video, it's easier to just upload a soundless video. Here's a demo with a slightly modified code: www.cregox.com/bg-video - instead of using a loop, I just used a huge video. 9 minutes before it loops. Nobody will stay there for that long anyway. stuck_out_tongue

#10

HI Caue!

Thanks for the updated link on G+! Do you have a SS interview as well? I’d love to see!

The client is requesting that the video-pop ups we made be featured somewhat smaller on the page so that some of the other content on the page is still visible. I’m thinking if you could reduce the size of the video pop up by about 25% (so it is not full screen) they would be happy. https://kate-bosse-87i3.squarespace.com/our-products-1/

Is this possible?

Thnaks so much Kate

#11

You're welcome. wink And nope, no interviews for me. I believe Rebecca had her hands full and although she had set an appointment with me twice we never managed to talk. At least I got the 20% coupon! smile

When is anything not possible?

We could easily reduce all lightbox contents with this custom css:

.sqs-lightbox-slide {
    width: 70% !important;
    height: 70% !important;
    top: 15% !important;
    left: 15% !important;
}

But to do it in anything more specific I may need working on some complex jquery coding. Hopefully, if you don't use lightbox for anything else, that should be enough.

#12

Thanks Caue! All things are possible! lol

I added the CSS, however, a little hang up- it reduces the video size, but does not get rid of the black screen overlay to see the remainder of the page, see here: https://kate-bosse-87i3.squarespace.com/our-products-1/

#13

It was by design. You never said you wanted to get rid of the black screen. It's there for a good reason, bringing focus to whatever the lightbox is showing up.

That's about same deal as before, though, depending what you want. I guess changing its opacity should be enough for you but without knowing why would you want to do this I'm not so sure:

.sqs-lightbox-overlay {
  opacity: 0.07 !important;
}

Beware that at around 0.15 the button X kinda disappears because it's about the same color.

#14

Well. they don’t want the black screen behind it at all- they want people to be able to click on another part of the screen if they want while the video is still up.

If you can give me an explanation as to why this is not a good idea, I will send it back to the client

thanks kate

#15

So, they basically want a movable window / frame, although maybe not necessarily movable looks like they wouldn't interject if it were. Or maybe placing the video on the page, like on youtube, then we can scroll down even while the video is running... In either case, I wouldn't have requested a "lightbox" to begin with. The first option I gave already allowed for that last one, it was just a matter of resizing the video.

Making it an actual small browser window would be a bad idea, I trust that's not it. Making it a movable frame is much more complicated than simply "removing the background" ( which you can already do with the code I provided, at least visually ).

I think this case is getting complicated enough that it would be better if you can either sketch exactly what the client wants or find a reference of something that's working exactly as the client wants. Else I fear we'll keep walking in circles.

#16

let me talk with them and get back to you- thanks caue!

#17

Hi Caue,

Hope you are well and had a happy Easter!

I am talking with this client (the Tek Five one) about the hover icons and will likely start that project with you this week. I have another project for this site: https://kate-bosse-xbs6.squarespace.com https://kate-bosse-xbs6.squarespace.com/ where the client wants the home page to look like the screen shot attached.

Can you tell me the cost to do this? (I would provide you with the updated logo that would be needed as well as files for the colored pattern in whatever format you need).

Thanks so much, Kate Bosse

Screen Shot 2015-04-03 at 6.05.43 PM.png1280x796 1.33 MB

#18

Easter was good, thanks. Looks like you've had a nice one yourself as well. smile

I'm not sure what you want to do there. Simplest way to get to that screenshot from what you currently have is simply making a big image including tumbly life and the colored triangles in one big logo, and simply adding it.