Jump to content

Need to modify videos from video gallery page

Go to solution Solved by tuanphan,

Recommended Posts

Hi! I have some questions concerning the video gallery and the individual video pages.

1. When you click a video from the gallery page, you go to a new page with the video only (which is what I want), but the video is HUGE and there is no option to scale it. I don't mind it being full screen but it seems to always size beyond my browser window and I have to scroll to see it all. Is there a way to modify this? I'd like to play with some sizing options.

2. Below the video in the section are elements that I like, but they have no options for customization. For example, I want to keep the pagination arrows and titles but the text is HUGE. How can I resize this text so it's smaller? BUT I don't want to make the arrows smaller, just the text. I also want the vertical space reduced here. This element is so far below the description box.

3. I would love to add a button in the middle of this pagination navigation that says GALLERY and just returns you back to the home gallery page but there's no way to insert anything in between those pagination elements.

Screenshot attached for reference.

Site is: gerbil-perch-ly7f.squarespace.com

Pass is: interactive4546

Screen Shot 2023-12-05 at 2.20.04 PM.png

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

Top Posters In This Topic

  • Solution

#1. You try adding to Website Tools (under Not Linked) > Custom CSS

/* Video size */
@media screen and (min-width:992px) {
.lesson-video-inner-wrapper {
    max-width: 50% !important;
    padding-bottom: 25% !important;
    margin: 0 auto !important;
}
}

 

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

This was super helpful, thank you. I was able to mess with the percentages to get the videos to work better in the space.

Any advice on the navigation element below? I was able to customize the CSS to make the titles smaller and eliminate the space between the navigation and the description, but I can't figure out how to insert a button in between the navigation elements!

Link to comment

Add to Website Tools (under Not Linked) > Code Injection > Footer

DO NOT Add to Custom CSS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) { 
   $('<section id="back-to" class="Index-page"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--center"><a href="/" class="sqs-block-button-element--small sqs-block-button-element sqs-button-element--primary">Gallery</a></div></div></section>').insertBefore('section.lesson-item-pagination>a:last-child');
 }); 
</script>
<style>
  #back-to:first-child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
section.lesson-item-pagination {
    position: relative;
}
</style>

image.thumb.png.7f72ac3d8f923e4e41993b1de7cb78ad.png

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.