How to create a video play button like on "Introducing Squarespace Seven"?


#1


#2

Thanks for getting in touch, Werner!

Yeah, I've seen your page on the first time, when I said it was a great hack you've done there. smile

Well, like I just commented with you there (again), what I would try to do is mix up many hacks into my likening. I have no doubt it's possible to do it in squarespace, with relatively little code and effort. And if I see enough people interested in this eventually I could even build a tutorial like the other specialists like to do... But not for now. stuck_out_tongue_winking_eye

Here's the steps I'd go to make it, using these as references:

  • Muno's solution sure looks great, but I'm not sure it's better to host videos on squarespace. I doubt there's any place better than youtube (unless you're doing porn, and I mean it). In any case, there's something to learn from there.
  • A nice hack to play video when pressing a button from the link I gave you there, and from my other work.

And if you're willing to pay for me doing it, please do read www.cregox.com/your-home first. I can do this for U$321, paid upfront, usually within 1 week from payment. heavy_dollar_sign


#3

Thanks for replying, Caue!

I'd like to accept your offer. Can I pay via Paypal?

Many thanks,
Werner


#5

That's great! sunny

I can send you a paypal invoice if you prefer, or you can go on Pay (also right there on the top corner).


#6

Thanks for sending the invoice. I have paid it this morning.

The goal would be to replace the orange video buttons on www.generation-y.ch with a solution like on "Introducing Squarespace Seven" (http://www.squarespace.com/seven) which plays the videos in full screen. The videos would be hosted on Vimeo Pro.

Lokking forward to working with you.


#7

Awesome! sunglasses

I've modified my Terms of Work slightly, and now I require every new customer to understand how the business will work before I begin. This is what's new and relevant:

After the payment I'll analyze the project deeper and properly. For most new projects (which are most of the requests I get) I have no way to analyze without actually doing part of it, or all of it. I may require more hours to get everything you need done. We can then agree on me doing less, you paying more, or we getting you a full refund. For any project that's just implementing code that already exists, such as the ones I've made myself (do check my github), it might cost you less than U$321 down to a low of U$123...

It might cost you nothing as well, you can just grab the code from there and implement it yourself! I offer them for free! If I get enough requests, eventually I may even start doing tutorials on how to implement a few things. wink

If you're okay, I'll begin working today.

And since I expect this to be no issue to you, already got you two questions:

First, do you prefer me to work straight on your squarespace or should I just give you the code needed and you apply it yourself? If it's the first, I'll need admin access.

Then, I can easily picture how to do this for the first section, with only 1 button and good height size. The current video would play on its background, dimmed out by some white overlapping transparency.

But the second section gets too big and the video wouldn't fit well. So we either need to crop it, repeat it or stretch it. I'd probably go for cropping, how about you?

I'm also not sure what you expect to see under brandpower, which have 2 buttons side by side. Do you want both bg videos simultaneously, splitted in half screen? I would prefer choosing one to show on the background, even if it's a 3rd one which would mix up both.

And I'm glad to be working with you on this! smile


#8

Thanks for your reply. Your terms of work are fine with me.

To answer your questions:

  1. You can just give you the code needed and I will apply it myself.
  2. I guess we currently don’t have the same understanding of the requirements. Or perhaps I have understood you wrong. There is no need to play a video in the background. It’s just the implementation of a «video play button» in order to be able to play embedded videos fullscreen.

Please find enclosed a pdf-file where I have briefly outlined the "as-is" and "to-be" solution. If you have additional questions don’t hesitate to contact me.

Looking forward to working with you on that solution.

Thanks,
Werner


#9

Couldn't see the PDF file, due to some issue on the forum... I can see you did send it, though. Sorry about that!

In any case, I guess I got what you want now.

Take a look if this is it (just made it):

http://www.cregox.com/full-video/

I probably still could improve it in a few ways:

  • By removing the vimeo controls (easier with a pro account which I don't have), because making this the same way SS7 video work ended up screwing up a bit with vimeo controls, which I couldn't touch enough to keep it there.

  • Or maybe there's a code-hackish way to remove the thumbnail when loading - other than, you know, using a custom dark image hack, which you'd probably think about. stuck_out_tongue

I hope that's at least pretty close from all you need.

Now, I'm gonna try and see if I can find that PDF...


Squarespace Developer Needed (for making a video button)
#10

Here is the pdf-file again smile

https://www.dropbox.com/s/bq3hyc38myqtaxy/To-be-solution.pdf?dl=0


#11

Wow, I don't think all that work on doing this PDF it was needed after all. As you may have been able to see, I had already implemented exactly all that! smile

Now I just moved the button to the side and added a text to make it more clear it was already as responsive as squarespace already is.

But I still wonder about the two points I brought in before, removing vimeo controls and the thumbnail when loading (which is not the play button thumbnail).


#12

True. I guess you were just to fast. But to have a common understanding will not hurt wink

The vimeo controls are no problem as we use a pro account and can tweak the controls quite a bit.

Removing thumbnail would be a nice to have. As long as it is not the play button image it shouldn't be as much of a problem as we can define the video thumbnail image in vimeo pro.

Does this help?

Thanks,
Werner


#13

Yeah. I'll work on removing the thumbnail, but since it's not the same as the button you could hack it away using a black image... Or maybe, it just happened to me, simply removing the thumbnail might work.

I'm not at my home office right now so I can't try it. But I'll let you know about this soon enough.

Other than that, are we done? smile


#14

Done. Removed the thumbnail. The code is also updated on the main page there http://www.cregox.com/full-video/

It was rather simple stuff. The difficult part was finding time to stop and do it. stuck_out_tongue_winking_eye

Please, let me know if you need anything else!


#15

Thanks so much. Your solution does look impressive. It'll be really cool to be able to use images, textlinks and buttons to play a video full screen.

But I guess I didn't get so far how to implement it. Have created a test page here where I am trying to play this video on vimeo https://vimeo.com/115116679

The script has been pasted into settings/advanced/page header code injection. But I am not able to use it with the play button.

Could you please help?


#16

I'm just guessing here, but looks like you may have selected the Lightbox feature on the Image Block. If you want any image block click through link to work, you have to leave that on the default unchecked.

There's another caveat there, for your test page. Since the video gallery solution uses the exact same video, the jqueryLightbox will hide it once it works. And since it's not working, that's where its secret lies... You need to add a gallery anywhere in the page, exactly like that one you just did, for the jqueryLightbox link to use it (and hide it). Maybe you already knew that, this is just a test page after all. But it will look a bit broken when it works. smile