Jump to content

Embedded Videos Not Filling Frame

Recommended Posts

  • Replies 12
  • Views 2.2k
  • Created
  • Last Reply

Top Posters In This Topic

Here's the code behind the video:

<a href="resupply">
<video style="width: 100%" autoplay="autoplay" muted="muted" loop="loop"  src="https://jlebowitz.squarespace.com/s/ALPHARS_Homepage.mp4">
    <source type="video/mp4" src="https://jlebowitz.squarespace.com/s/ALPHARS_Homepage.mp4">
  <body oncontextmenu="return false;" >
</video>
</a>

 

Link to comment

The video is constrained to the container and because the container is set to 8 rows it will fill the width 100% but not the height. If you make the container shorter, then the video won't stretch to the edges. Your setup is a compromise based on the 16:9 constraints of videos in individual blocks. Ideally you would add them to a grid gallery block, which would break you away from the stretching across rows. Hope that helps.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
  • 9 months later...

I'm having a similar issue! the embedded video is off-center from the frame and therefore I can't align it to other elements on my page (see attached) Here's the code I'm using:

<iframe src="https://player.vimeo.com/video/748021625?autoplay=1&loop=1&autopause=0&background=1&muted=1&color=ffffff&controls=0&portrait=0"  frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

 

If anyone can help I'd surely appreciate it -dp

test.jpg

Link to comment
12 hours ago, Martian said:

I'm having a similar issue! the embedded video is off-center from the frame and therefore I can't align it to other elements on my page (see attached) Here's the code I'm using:

<iframe src="https://player.vimeo.com/video/748021625?autoplay=1&loop=1&autopause=0&background=1&muted=1&color=ffffff&controls=0&portrait=0"  frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

 

If anyone can help I'd surely appreciate it -dp

test.jpg

Can you share link to page where you added this? We can check easier

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

You have this code in CSS, it causes problem

#siteWrapper .embed-block {
    aspect-ratio: 1.77777778;
    margin: 17px;
    padding: 0px !important;
}

You can remove it or add this to Design > Custom CSS to override it

#siteWrapper .embed-block {
    margin: 0 !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...
On 9/16/2023 at 10:02 PM, NickBastian said:

Hi, I'm having a similar problem. I'm trying to get my videos to fill the bounding box and autoplay? Any suggestions would be greatly appreciated. 

This is the page: https://www.bastianldn.com/property/burbeck

Thanks
Nick 

You mean this video?

image.thumb.png.848fe6ca8fd08bf302be4d163a097445.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

Hi Tuanphan :), 

Thanks for coming back to me on this.

That is the video I'm referencing. I'm trying to get the spacing uniform between any videos and images on my project pages. In this case the video is square, so I'd like it to fill the bounding box exactly, so it lines up perfectly with the Squarespace grid. 


Equally if the video is more landscape like this one: https://www.bastianldn.com/property/henika-group it be great if I could again fill the bounding box, to eliminate the spacing issues created by the grid.

Thanks, 
Nick 

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.