Jump to content

Resize Code Block

Recommended Posts

I made a code block (the purple one) with a video referencing a file on my website. I made it so that on hover, my video plays, and text appears below, but I cannot figure out how to resize the code block itself, which doesn't match the size of the video and constantly changes depending on the size of the browser. As a result, my text centers on the code block, not the video.

The code block:

<div class="overlay1">
<div class="video-container1">
       <video class="video1" src="https://www.kaikepski.com/s/photos_notext5.mp4" muted></video>
</div>
  <div class="video-text1"><h3>photos</h3>
</div>
</div>

<style>
.video-container1 {
    width: 220px;
    height: 280px;
    padding: 20px;
    margin: 0px;
    overflow: hidden;
    box-shadow: 0px 0px 20px rgba(90, 34, 139, 0.8);
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
		}

.video1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.3s, transform 0.3s;
    transform: scale(1);
		}

.video-container1:hover {
    box-shadow: 0px 0px 40px rgba(90, 34, 139, 0.9);
		}

.video-container1:hover .video1 {
    opacity: 1;
    transform: scale(1.05);
		}

.video-text1 {
  	opacity: 0;
  	transition: .5s ease;
		}

.overlay1 {
  	text-align:center;
    	}
  
.overlay1:hover .video-text1 {
  	opacity: 1;
  	transition: .5s ease;
		}
</style>

<script>
  const video1 = document.querySelector('.video1');

video1.addEventListener('mouseover', function () {
    this.play();
});

video1.addEventListener('mouseout', function () {
    this.pause();
    this.currentTime = 0;
});

</script>

I've Googled this and looked at other forums, but I haven't been able to figure it out.

Screenshot 2024-02-15 at 4.45.38 PM.png

Screenshot 2024-02-15 at 4.46.09 PM.png

Link to comment

Add this to Custom CSS, save, then edit the page and resize your code blocks:

html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script {
  display: none !important;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 2/18/2024 at 7:56 PM, nowavves said:

Unfortunately, that didn't work. The script part is visibly gone but the code block size still changes independently.

It looks like a significant improvement, but because you have the contents set to a fixed width and height you won't be able to control that via the block sizing.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 weeks later...

I have a slightly different version of this with some added interactivity:

<div class="overlay2">
<div class="video-container2">
       <video class="video2" src="https://www.kaikepski.com/s/photos_notext5.mp4" muted></video>
</div>
  <div class="video-text2"><h3>photos</h3>
</div>
</div>

<style>

.overlay2 {
text-align:center;
    }
  
.video-container2 {
    position: relative;
    width: 220px;
    height: 280px;
    padding: 20px;
    margin: 0px;
    overflow: hidden;
    box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
}

.video2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.3s, transform 0.3s;
    transform: scale(1);
}

.video-container2:hover {
    box-shadow: rgb(85, 91, 255) 0px 0px 0px 6px, rgb(31, 193, 27) 0px 0px 0px 12px, rgb(255, 217, 19) 0px 0px 0px 18px, rgb(255, 156, 85) 0px 0px 0px 24px, rgb(255, 85, 85) 0px 0px 0px 30px;
}

.video-container2:hover .video2 {
    opacity: 1;
    transform: scale(1.05);
}

.video-text2 {
  display: none;
  transition: .5s ease;
}
  
.overlay2:hover .video-text2 {
  display: block;}
}
</style>

<script>
  
  const video2 = document.querySelector('.video2');

video2.addEventListener('mouseover', function () {
    this.play();
});

video2.addEventListener('mouseout', function () {
    this.pause();
    this.currentTime = 0;
});

</script>

On this one, the position of the text revealed on hover is correlated to the size of the code block, so it doesn't look good:

The link is: https://www.kaikepski.com/home_test-1

Screenshot 2024-03-11 at 2.06.57 PM.png

Screenshot 2024-03-11 at 2.07.03 PM.png

Screenshot 2024-03-11 at 2.07.10 PM.png

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.