Jump to content

How do I format embedded video so it's centered when viewing on mobile?

Recommended Posts

Site URL: https://www.totemgenekeys.com/totems/kiwi

I'm not a coder, so I'm totally lost with this. I am grabbing media from Reddit and using their 'embed' feature. I copy and pasting the provided iframe code into a Code Block. (When I attempt this with an Embed Block it only returns 'null')

The media does show up but the trouble is, it displays with a width and height formatted for desktop, and is left aligned. I.e. half the video is cut off when viewing on a smaller screen). 

I want it to resize when viewing on mobile, and have it be centered on mobile devices.

 

Sample of the HTML:


<iframe id="reddit-embed" src="https://www.redditmedia.com/r/MadeMeSmile/comments/o12bua/this_kiwi_falling_over_from_excitement_of_finding/?ref_source=embed&amp;ref=share&amp;embed=true" sandbox="allow-scripts allow-same-origin allow-popups" style="width:100%" height="517" width="640" scrolling="no"></iframe>
 

Link to comment
  • 1 month later...
On 8/5/2021 at 12:06 AM, homeostace said:

Site URL: https://www.totemgenekeys.com/totems/kiwi

I'm not a coder, so I'm totally lost with this. I am grabbing media from Reddit and using their 'embed' feature. I copy and pasting the provided iframe code into a Code Block. (When I attempt this with an Embed Block it only returns 'null')

The media does show up but the trouble is, it displays with a width and height formatted for desktop, and is left aligned. I.e. half the video is cut off when viewing on a smaller screen). 

I want it to resize when viewing on mobile, and have it be centered on mobile devices.

 

Sample of the HTML:


<iframe id="reddit-embed" src="https://www.redditmedia.com/r/MadeMeSmile/comments/o12bua/this_kiwi_falling_over_from_excitement_of_finding/?ref_source=embed&amp;ref=share&amp;embed=true" sandbox="allow-scripts allow-same-origin allow-popups" style="width:100%" height="517" width="640" scrolling="no"></iframe>
 

Seems like the video dimension is set inside the iframe, since it is external iframe, we can not edit how element inside it display

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 5 months later...

Thanks @bangank36. I deleted the width and height inside the embed code, and now the video fits better on mobile. It's a small video on desktop, but it's OK since most of my users view my pages via mobile. 

For reference, here was my original embed code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

and here is the updated embed code now:

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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.