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
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.