Embed Video Not Resizing For Mobile View

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

Hi. Video looks fine here. Do you still need help?

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:

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

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

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:

 

 

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

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

 

It looks like you fixed this?

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.

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.

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

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!

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?

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?

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.

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?

On 7/13/2022 at 10:56 PM, tuanphan said:

Can you take a screenshot?

3 hours ago, LV-OZ said:

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

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

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?

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