Resize Code Block

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.

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

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

Can you share link to page where you added Code Block?

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.

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