krystenjade Posted April 9, 2022 Share Posted April 9, 2022 Site URL: https://huntervalleywineshow.squarespace.com/ Hi, I have embedded two videos on this homepage. I would like them to fit the width of the container and the height to automatically resize for desktop and mobile. I also want to have the videos loop continuously. Current code: <iframe width="560" height="315" src="https://www.youtube.com/embed/K5zSIN5DPng?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> Link to comment
tuanphan Posted April 10, 2022 Share Posted April 10, 2022 Add to Design > Custom CSS @media screen and (max-width:767px) { iframe[src*="youtube"] { width: 100% !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
krystenjade Posted April 11, 2022 Author Share Posted April 11, 2022 Thank you @tuanphan. The code worked, but the height doesn't automatically scale to the width on mobile? Are you also able to help me loop the videos so they continue playing? Link to comment
krystenjade Posted April 11, 2022 Author Share Posted April 11, 2022 @tuanphan I have just added a password to the website: Password: hvws2022 I am just after assistance making the videos autoplay and continuously loop on all browsers if that is possible. And also automatically scale the height to the video on mobile. Thanks so much for your help. Link to comment
tuanphan Posted April 15, 2022 Share Posted April 15, 2022 On 4/11/2022 at 8:47 AM, krystenjade said: Thank you @tuanphan. The code worked, but the height doesn't automatically scale to the width on mobile? Are you also able to help me loop the videos so they continue playing? Hi, You can add height value @media screen and (max-width:767px) { iframe[src*="youtube"] { width: 100% !important; height: 200px !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
krystenjade Posted April 16, 2022 Author Share Posted April 16, 2022 @tuanphan thank you. That code didn't work for me. I have found a source online: https://www.amusing.ly/blog/2018/8/10/looping-videos-on-squarespace Which avoids having to use Youtube. This worked for me. Thanks for your help. Link to comment
BlueBayCapital Posted December 21, 2022 Share Posted December 21, 2022 TuanPhan, I am having the same problem. I am having to use the CSS code to prevent unwanted videos being displayed on my website from YT "suggested" videos options. I have also tried adding your code but it does not work? PS I am NOT a coder, nor do I have any experience in writing CSS. I am including a screen shot of a CSS block within my SQSP site, with the CSS window opened up. I'll also provide a link to this exact page below. Could you type in EXACTLY where your code should be put into my CSS block? https://www.bbcfunding.com/real-estate-investors/5ws-of-private-lending Link to comment
tuanphan Posted December 24, 2022 Share Posted December 24, 2022 On 12/22/2022 at 4:24 AM, BlueBayCapital said: TuanPhan, I am having the same problem. I am having to use the CSS code to prevent unwanted videos being displayed on my website from YT "suggested" videos options. I have also tried adding your code but it does not work? PS I am NOT a coder, nor do I have any experience in writing CSS. I am including a screen shot of a CSS block within my SQSP site, with the CSS window opened up. I'll also provide a link to this exact page below. Could you type in EXACTLY where your code should be put into my CSS block? https://www.bbcfunding.com/real-estate-investors/5ws-of-private-lending You mean resize video or prevent suggested video? 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
BlueBayCapital Posted December 27, 2022 Share Posted December 27, 2022 On 12/23/2022 at 11:15 PM, tuanphan said: You mean resize video or prevent suggested video? Resize current video. I already have the code to prevent other videos from being suggested after my video on my site. I'm simply needing to know who my code would look if I added in your code so that the block resizes for mobile. Link to comment
tuanphan Posted December 29, 2022 Share Posted December 29, 2022 On 12/28/2022 at 1:11 AM, BlueBayCapital said: Resize current video. I already have the code to prevent other videos from being suggested after my video on my site. I'm simply needing to know who my code would look if I added in your code so that the block resizes for mobile. I just tested & the code still works here. Add code to bottom of CSS box. If it still doesn't work, please send all code in CSS box (after adding the code), we can check easier @media screen and (max-width:767px) { iframe[src*="youtube"] { width: 100% !important; height: 200px !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
BlueBayCapital Posted February 14, 2023 Share Posted February 14, 2023 @tuanphan sorry its taken so long I was out of the country and did not have access to reliable internet. I'm back now. So I added your code to the bottom of the CSS block where my youtube video is hosted. Again I AM NOT a programmer so forgive the seemingly basic error, but this is what I am getting. I add the code and all it does is show the code next to the video? The code in the CSS block is as follows <center> <iframe width="720" height="415" src="https://www.youtube.com/embed/Y2aUvk9cPsA?controls=0&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> @media screen and (max-width:767px) { iframe[src*="youtube"] { width: 100% !important; height: 200px !important; } } Link to comment
tuanphan Posted February 16, 2023 Share Posted February 16, 2023 On 2/14/2023 at 7:55 AM, BlueBayCapital said: @tuanphan sorry its taken so long I was out of the country and did not have access to reliable internet. I'm back now. So I added your code to the bottom of the CSS block where my youtube video is hosted. Again I AM NOT a programmer so forgive the seemingly basic error, but this is what I am getting. I add the code and all it does is show the code next to the video? The code in the CSS block is as follows <center> <iframe width="720" height="415" src="https://www.youtube.com/embed/Y2aUvk9cPsA?controls=0&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> @media screen and (max-width:767px) { iframe[src*="youtube"] { width: 100% !important; height: 200px !important; } } Hi, Your Screenshot is Embed Block. But you need to add my code to Design > Custom CSS BlueBayCapital 1 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
BlueBayCapital Posted February 17, 2023 Share Posted February 17, 2023 WOW! THank you so much it works perfectly! And again thankyou for your patience, I did not doubt it would work, I knew it was operator error 😉 Link to comment
EM1133 Posted November 30, 2023 Share Posted November 30, 2023 I have the same problem, but "Design" is nowhere to be found. I added the coding: @media screen and (max-width:767px) { iframe[src*="youtube"] { width: 100% !important; } } to my custom CSS section but nothing happened. Any suggestions? I'm not a developer so any instructions would be great. Link to comment
tuanphan Posted December 3, 2023 Share Posted December 3, 2023 On 12/1/2023 at 4:53 AM, EM1133 said: I have the same problem, but "Design" is nowhere to be found. I added the coding: @media screen and (max-width:767px) { iframe[src*="youtube"] { width: 100% !important; } } to my custom CSS section but nothing happened. Any suggestions? I'm not a developer so any instructions would be great. Remove Image URL in Line 01 from your CSS box 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
AstonD Posted June 9 Share Posted June 9 Please help. I have the same problem, trying to resize a Youtube embedded video on my Squarespace website. I used Youtube embed code directly on the page (with embed tool). The video is showing in 16:9 ratio on the mobile page. Can you help me make the video vertical on mobile? Link to the page: https://www.chrismailander.com/the-standard 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