Jump to content

Add video banner to event page

Recommended Posts

Event page example: https://www.singingwithnightingales.co.uk/event/11-april-2024-sussex-ywd83-fmsbr

I would like to add a full-width video banner to all of my individual event pages:

  • The banner will be the same for every event
  • I would like the video to autoplay
  • The video banner should be behind the logo and "MENU"

@tuanphan are you able to sprinkle your magic here? Thank you in advance for taking a look!

Screenshot 2024-02-26 at 10.15.14.png

Link to comment
  • Replies 11
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

You mean same video for all events?

Two way to achieve this

(1) Add a Vide Block with Autoplay to Site Footer, then I can test code to move it top of event

(2) Add Video Block with Autoplay to Not Linked Page, then use similar code (this will require a custom plugin to pull content from Not Linked Page)

If you want (1), you can add video to Site Footer, then I will test the code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
16 hours ago, websitebuilder12345 said:

@tuanphan I have added a video block with autoplay to the bottom of this event page: https://www.singingwithnightingales.co.uk/event/11-april-2024-sussex-ywd83-fmsbr-ep9hx

Please kindly provide code to move it to the top of the event. Thank you!

Add this code to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('.eventitem-column-content .video-block').insertBefore('article>section:first-child');
});
</script>
<style>
[class*="type-events"].view-item .video-block {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
</style>

image.png.80355f0883ac952c18cfff274431db53.png

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan Thank you!

I would like to make the banner thinner. I have added the below code but it's not quite working.

    height: 300px !important;
  • Desktop: how can I remove the space between the video banner and "Back to all events" link?
  • Desktop: I would like the video to be vertically centred within the container
  • Mobile: how can I remove the space between the video banner and "Back to all events" link?
  • Mobile: how do I hide the white block below the video?

Thank you!

Screenshot 2024-02-26 at 10.15.14.png

Screenshot 2024-02-27 at 08.58.33.png

Link to comment

@tuanphan Apologies. 

My event page design has now updated, and it features a YouTube video. So I think the code won't work as well now.

Instead, please can we proceed with your earlier suggestion:

Quote

(2) Add Video Block with Autoplay to Not Linked Page, then use similar code (this will require a custom plugin to pull content from Not Linked Page)

I'd be really grateful if you could provide new code for this. I have added the video block (autoplay) here:

https://singingwithnightingales.co.uk/video-banner-for-event-pages

I would then also love to achieve the same tweaks:

 

Quote

 

  • Desktop: how can I remove the space between the video banner and "Back to all events" link?
  • Desktop: I would like the video to be vertically centred within the container
  • Mobile: how can I remove the space between the video banner and "Back to all events" link?
  • Mobile: how do I hide the white block below the video?

 

Thanks x a million!

Link to comment
4 hours ago, websitebuilder12345 said:

Hello @tuanphan, I hope you are well! You give so much to this community and I know you will be busy helping lots of other Squarespace users like me, but I just wanted to ask if you have an update on when you might be able to provide the custom code, please? Thank you!

I wrote a quick guide here, you try follow it, if you can't make it work, let me know with an event url, I will check again https://summaryblock.com/event-detail-video-banner-use-not-linked-page/

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.