Jump to content

Embed Video Not Resizing For Mobile View

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.ashleachfitness.co.uk/92fine

Hello,

I've added an embedded video to my website, I had to do it this way to enable the feature ?rel=0 to prevent YouTube from suggesting other peoples video at the end of mine, unfortunately, although the video appears fine on desktop view, when reverting to mobile view or an actual mobile phone, the video is too large for the page which is causing an issue. 

 

I've attached a print screen. 

 

Any suggestions?

 

Thanks,

 

Ash

Screenshot 2021-03-03 at 17.23.06.png

Link to comment
  • Replies 17
  • Views 2.4k
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...

Hi - I have a similar problem.

I used this code to embed a video on my website using and EMBED block:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/fDb1cqyi44w?playlist=fDb1cqyi44w&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>

and this to try and fix it being too large in MOBILE, but it does not work:

@media screen and (max-width:640px) {
#block-yui_3_17_2_1_1655703720249_4133 {
	width: 20% !important;
	margin: auto;
  }
}

So it looks like this in mobile:

 image.thumb.png.f70ff5e81ee7eb99fef1db3215544ac4.png

 

Can anyone please help fixing this issue? Thanks so much!

Website: https://lobster-ray-g42d.squarespace.com/fragrance

 

Link to comment
15 hours ago, LV-OZ said:

Hi - I have a similar problem.

I used this code to embed a video on my website using and EMBED block:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/fDb1cqyi44w?playlist=fDb1cqyi44w&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>

and this to try and fix it being too large in MOBILE, but it does not work:

@media screen and (max-width:640px) {
#block-yui_3_17_2_1_1655703720249_4133 {
	width: 20% !important;
	margin: auto;
  }
}

So it looks like this in mobile:

 image.thumb.png.f70ff5e81ee7eb99fef1db3215544ac4.png

 

Can anyone please help fixing this issue? Thanks so much!

Website: https://lobster-ray-g42d.squarespace.com/fragrance

 

It looks like you fixed this?

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
4 hours ago, tuanphan said:

It looks like you fixed this?

No, I'm afraid not. I just hid the embedded code on mobile and inserted a regular video block for mobile only.

I would still love to see if there is a work around for this.

The problem still remains that the embedded code I used does not auto play or loop on mobile, nor is it smaller or centred on screen.

Link to comment
2 hours ago, LV-OZ said:

No, I'm afraid not. I just hid the embedded code on mobile and inserted a regular video block for mobile only.

I would still love to see if there is a work around for this.

The problem still remains that the embedded code I used does not auto play or loop on mobile, nor is it smaller or centred on screen.

Can you make it appear? If impossible, you can duplicate the page & add, we can check there.

Edited by tuanphan
typo

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
On 6/21/2022 at 2:25 PM, tuanphan said:

Can you make it appear? If impossible, you can duplicate the page & add, we can check there.

thank you.

I have duplicated the page - as the other one is live.  The other coding is not applied to this page, so it looks a little wonky, but all you need to focus on is the embedded code for the video.

Much appreciated!

Website: https://lobster-ray-g42d.squarespace.com/fragrance-2

Link to comment
  • Solution
On 6/23/2022 at 10:44 AM, LV-OZ said:

thank you.

I have duplicated the page - as the other one is live.  The other coding is not applied to this page, so it looks a little wonky, but all you need to focus on is the embedded code for the video.

Much appreciated!

Website: https://lobster-ray-g42d.squarespace.com/fragrance-2

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
On 6/24/2022 at 6:16 PM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
iframe[src*="youtube"] {
    width: 100% !important;
}
}

 

Thank you so much - it worked well.

Is there any way to adjust the height of this block so that that there is no black bands top and bottom of the video? Ie. so it's the same height of the actual video.

Your help is so appreciated!

 

Link to comment
1 minute ago, LV-OZ said:

Thank you so much - it worked well.

Is there any way to adjust the height of this block so that that there is no black bands top and bottom of the video? Ie. so it's the same height of the actual video.

Your help is so appreciated!

 

The only other issue is that is does not autoplay for some reason in  mobile. Is there a way around that?

 

Link to comment
1 hour ago, LV-OZ said:

The only other issue is that is does not autoplay for some reason in  mobile. Is there a way around that?

 

#1. Use this new CSS

@media screen and (max-width: 767px) {
    #block-effd62c54db4c6b98f6c iframe[src*="youtube"] {
        width:100% !important;
        height: 200px;
    }
}

#2. Can you send the embed code?

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
  • 3 weeks later...
On 6/26/2022 at 3:43 PM, tuanphan said:

#1. Use this new CSS

@media screen and (max-width: 767px) {
    #block-effd62c54db4c6b98f6c iframe[src*="youtube"] {
        width:100% !important;
        height: 200px;
    }
}

#2. Can you send the embed code?

Sorry, just saw this:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/fDb1cqyi44w?playlist=fDb1cqyi44w&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>

 

But, also the black bands still appear on the video!

dutjahn.com/fragrance

 

thank you - sorry for the delay.

Link to comment
1 hour ago, LV-OZ said:

Sorry, just saw this:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/fDb1cqyi44w?playlist=fDb1cqyi44w&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>

 

But, also the black bands still appear on the video!

dutjahn.com/fragrance

 

thank you - sorry for the delay.

Can you take a screenshot?

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
On 7/15/2022 at 4:57 PM, tuanphan said:

I think it is black inside video. Can you check video? Do you have a video file?

I do have the video, but it is not black inside the video itself. Perhaps the aspect ratio does not work in the mobile configuration!?

Link to comment
  • 4 months later...
On 11/29/2022 at 11:41 PM, DuvalStreetMedia said:

I am also having this issue but with a vimeo video, half of the video is off the screen on mobile. What should I do?

Can you share link to page where you added video? We can check easier

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.