nowavves

@nick_sh I made a sample page: https://www.kaikepski.com/tree_audio

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

That worked, thank you @tuanphan!

@nick_sh I have a Business Subscription that I pay for

I also have this problem. I tried the code from this forum and this one, but no luck. Nothing happens at all.

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

I published an HTML 5 Canvas doc from Adobe Animate, which worked fine until I added it to Squarespace. The play and pause buttons do not work due to a CORS error. The audio file is hosted on Squarespace. I do not really understand what this means, so any help would be greatly appreciated!

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.

@Anderson65 I had custom CSS to create a typing effect that got messed up, so I deleted it and that's when it broke. There's no media queries for this page.

For some reason, the mobile version of one of my pages is all weird. The grid format suddenly changed out of nowhere to be different than all of my other pages, so now everything is super close to the edge and the next buttons at the bottom are cut off. The three lines in blue are cut off and I have no option to edit the section.

I have interactive pieces I created in Adobe Animate. I originally coded the buttons in ActionScript 3.0, but I am translating them to JavaScript to upload them to my portfolio. I can't find much good info on how to do this. Publishing the document from Animate gives me a .html, .js, and .png file in a folder. I can't just upload the .js file because it's not just formatting, but an interactive piece I created. As someone who is not a huge fan of web design, I am really confused as to how I am supposed to get the pieces on my website. Ideally, I want a portfolio page, but I am also willing to just put them all on one simple page. Any help would be greatly appreciated!