natashaj Posted December 30, 2022 Share Posted December 30, 2022 Here is a link to the webpage I'm working on: https://www.natashajohnux.com/collect I added a code block and put in the following code for the video playing at the top of the webpage: <video autoplay="autoplay" loop="true" width="770"> <source src="https://static1.squarespace.com/static/620b3aebd5c003030aac6739/t/6389718de488386b64bbffbd/1669951885933/for+portfolio.mp4 " type="video/mp4"/> </video> How do I change the code to make it responsive to different screen sizes? Thanks! Link to comment
Beyondspace Posted December 30, 2022 Share Posted December 30, 2022 9 hours ago, natashaj said: Here is a link to the webpage I'm working on: https://www.natashajohnux.com/collect I added a code block and put in the following code for the video playing at the top of the webpage: <video autoplay="autoplay" loop="true" width="770"> <source src="https://static1.squarespace.com/static/620b3aebd5c003030aac6739/t/6389718de488386b64bbffbd/1669951885933/for+portfolio.mp4 " type="video/mp4"/> </video> How do I change the code to make it responsive to different screen sizes? Thanks! So you mean this image? I can not see any video on this page BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
natashaj Posted December 30, 2022 Author Share Posted December 30, 2022 5 hours ago, Beyondspace said: So you mean this image? I can not see any video on this page Yes it's that image! I set it to a video that autoplays...is it not showing up as a video on your end? Link to comment
Beyondspace Posted December 31, 2022 Share Posted December 31, 2022 18 hours ago, natashaj said: Yes it's that image! I set it to a video that autoplays...is it not showing up as a video on your end? You can try the following code to fix the right width on mobile @media only screen and (max-width: 767px) { .sqs-block-code video { width: 100%; } } Just a comment that you video does not run on my end BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
natashaj Posted January 1 Author Share Posted January 1 (edited) 13 hours ago, Beyondspace said: You can try the following code to fix the right width on mobile @media only screen and (max-width: 767px) { .sqs-block-code video { width: 100%; } } Just a comment that you video does not run on my end I tried this and it didn't work. I forgot to mention I used HTML to code my video Edited January 1 by natashaj Link to comment
tuanphan Posted January 2 Share Posted January 2 On 12/31/2022 at 4:07 AM, natashaj said: Yes it's that image! I set it to a video that autoplays...is it not showing up as a video on your end? It doesn't autoplay here. To set autoplay, change your code to this <video autoplay loop width="770px"> <source src="https://static1.squarespace.com/static/620b3aebd5c003030aac6739/t/6389718de488386b64bbffbd/1669951885933/for+portfolio.mp4" type="video/mp4"> </video> Reference: https://www.w3schools.com/tags/tag_video.asp Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
natashaj Posted January 3 Author Share Posted January 3 On 1/1/2023 at 6:40 PM, tuanphan said: It doesn't autoplay here. To set autoplay, change your code to this <video autoplay loop width="770px"> <source src="https://static1.squarespace.com/static/620b3aebd5c003030aac6739/t/6389718de488386b64bbffbd/1669951885933/for+portfolio.mp4" type="video/mp4"> </video> Reference: https://www.w3schools.com/tags/tag_video.asp Thank you! Do you know how I can change my code to make it responsive to different screen sizes? Link to comment
tuanphan Posted January 7 Share Posted January 7 On 1/4/2023 at 1:39 AM, natashaj said: Thank you! Do you know how I can change my code to make it responsive to different screen sizes? Try adding to Design > Custom CSS @media screen and (max-width:991px) { video { width: 100% !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment