Embed Video Not Resizing For Mobile View

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

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.

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

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!!!

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?

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!

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!