Jump to content

Embedded Video Not Resizing For Mobile View

Recommended Posts

Hi, I have an embedded video on my website that is not resizing for mobile view. Please see below:

 

Desktop View - Happy with this 🙂
1975599658_desktopview.thumb.png.8b7d47403f1db6251b0b0fb67c8068d3.png

Mobile View - Not happy with this 😞

1837159475_mobileview.png.23d1e747068027b8b90f4b58b9822f5d.png

 

I have use the following code injection to embed a video onto my site:

 <video autoplay="autoplay" loop="true" width=900">
    <source src="https://static1.squarespace.com/static/61126e32043e7f1bf0b43063/t/6240bc26d8515b154b08c851/1648409696060/Aodh+Design+The+Archway+House.webm" type="video/webm"/>
  </video>


I have tried using the following Custom CSS to resize it for mobile, which worked for interactive panorama images on my site, but does not work for this specific case:

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

 

Any help would be appreciated to get this video to scale to the width of a mobile in mobile view.

 

Many Thanks

Link to comment

If anyone comes across this post. I have solved it. I just had to change the code injection from: <....width=900" > to <....width=100%" >. So the final code injection for my case is shown below, instead of what it was in my initial post. 

 

<video autoplay="autoplay" loop="true" width=100%">
    <source src="https://static1.squarespace.com/static/61126e32043e7f1bf0b43063/t/6240bc26d8515b154b08c851/1648409696060/Aodh+Design+The+Archway+House.webm" type="video/webm"/>
  </video>

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