homeostace Posted August 4, 2021 Posted August 4, 2021 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&ref=share&embed=true" sandbox="allow-scripts allow-same-origin allow-popups" style="width:100%" height="517" width="640" scrolling="no"></iframe> Beyondspace 1
Beyondspace Posted October 2, 2021 Posted October 2, 2021 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&ref=share&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 DLee1209 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> No-code customisations for Squarespace
DLee1209 Posted April 1, 2022 Posted April 1, 2022 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>
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment