Jump to content

Resizing Embedded Youtube Video

Recommended Posts

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>

Link to comment
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;
}
}

 

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
  • 8 months later...

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

image.thumb.png.9ef0404955111d81f78f25934585afbb.png

Link to comment
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

image.thumb.png.9ef0404955111d81f78f25934585afbb.png

You mean resize video or prevent suggested video?

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

Link to comment
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;
}
}

 

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
  • 1 month later...

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

Screen Shot 2023-02-13 at 7.51.51 PM.png

Screen Shot 2023-02-13 at 7.54.22 PM.png

Link to comment
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;
}
}

Screen Shot 2023-02-13 at 7.51.51 PM.png

Screen Shot 2023-02-13 at 7.54.22 PM.png

Hi,

Your Screenshot is Embed Block. But you need to add my code to Design > Custom CSS

squarespace-add-css1-min.png

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
  • 9 months later...

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. 

vt web.jpg

vt web 2.jpg

Link to comment
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. 

vt web.jpg

vt web 2.jpg

Remove Image URL in Line 01 from your CSS box

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
  • 6 months later...

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.