janmorgan Posted April 8, 2022 Share Posted April 8, 2022 Site URL: https://surfingmarocco.squarespace.com/ Hi there, I see this was a problem on March 3, 2022 also, but fixed without an answer appearing on the forum! So I have several videos on the page (using <> code from youtube) and none of them fit into the cell phone width. Please could someone help... perhaps I can just edit the squarespace code but I don't know what it should be changed to sorry! I've fiddled with the settings for the page width to no avail. Thank you, happy weekend! Jan Link to comment
SQSPStarter Posted April 8, 2022 Share Posted April 8, 2022 I think the site is password protected, However the solution to this problem is Add two video, One for desktop: 16:9 ratio Other for mobile: 4:3 ratio, Now hide Desktop Video on Mobile and Vice versa. // To hide the Desktop Video on mobile #ID { display: none !important; } // To hide the mobile Video on Desktop @media only screen and (max-width: 449px) { #ID { display: none !important; } } Inspect the Element to find the id and replace it with ID in the code. Become a contributor to the largest resource for Squarespace and gain recognition from thousands of visitors.Join us on this exciting journey. Ping us here!. Link to comment
tuanphan Posted April 10, 2022 Share Posted April 10, 2022 On 4/9/2022 at 12:07 AM, janmorgan said: Site URL: https://surfingmarocco.squarespace.com/ Hi there, I see this was a problem on March 3, 2022 also, but fixed without an answer appearing on the forum! So I have several videos on the page (using <> code from youtube) and none of them fit into the cell phone width. Please could someone help... perhaps I can just edit the squarespace code but I don't know what it should be changed to sorry! I've fiddled with the settings for the page width to no avail. Thank you, happy weekend! Jan Try adding this to Design > Custom CSS /* Mobile Youtube */ @media screen and (max-width:767px) { iframe[src*="youtube"] { width: 100% !important; } } Bermzies, HarpsichordZine, sayreambrosio and 1 other 2 2 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
bouleverser Posted May 30, 2022 Share Posted May 30, 2022 (edited) On 4/11/2022 at 1:23 AM, tuanphan said: Try adding this to Design > Custom CSS /* Mobile Youtube */ @media screen and (max-width:767px) { iframe[src*="youtube"] { width: 100% !important; } } This worked for me! However, I'm still having the same issue with a Google Forms Survey embedded just below my Youtube Video. Now, the video is within the confines, but the survey still extends past. Any advice? Thank you!!! Edited May 30, 2022 by bouleverser Link to comment
tuanphan Posted June 1, 2022 Share Posted June 1, 2022 On 5/30/2022 at 6:03 PM, bouleverser said: This worked for me! However, I'm still having the same issue with a Google Forms Survey embedded just below my Youtube Video. Now, the video is within the confines, but the survey still extends past. Any advice? Thank you!!! Can you share link to page where you use Google Form? 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
philipcondron Posted October 8, 2022 Share Posted October 8, 2022 Tuanphan I have to say, you are the light at the end of the tunnel. I've been on many forums looking for solutions which others are experiencing also and you are always there with an answer. Thank you for your help! Link to comment
HarpsichordZine Posted March 28 Share Posted March 28 On 4/10/2022 at 7:23 PM, tuanphan said: Try adding this to Design > Custom CSS /* Mobile Youtube */ @media screen and (max-width:767px) { iframe[src*="youtube"] { width: 100% !important; } } This worked for me! Thank you! 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