Resizing Embedded Youtube Video

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>

Add to Design > Custom CSS

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

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?

@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. 

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

@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. 

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

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?

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.

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

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

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

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 😉

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. 

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