Embeds that are not compatible with Embed.ly yet

Hi, I am new to Write.as and a Pro customer. I have been basically getting myself familiar with the platform and learning how to get things to display the way I want.

I use smugmug for photo and video hosting, and they offer an iframe embed code for videos. It works great to get the videos to display on a desktop, but when viewed on mobile device the video was spilling over beyond the right hand margin of the page.

I looked up how to make the embeds more responsive and got as far as getting the container for the video to show up within the screen. However, the media is not centered within the container, and the play button is not visible. Is there a certain code that makes sure the video and play button fits centered within it’s container?

Here’s the code that comes out of the box from Smugmug (I apologize for the weird formatting)

<iframe allow=

“fullscreen” allowfullscreen=“true” frameborder=“0” scrolling=“no” width=“640” height=“360” src=“https://api.smugmug.com/services/embed/XXXXXXXXXX”>

Here’s what I tried instead in the post:

<iframe class="wrapped-iframe" src="https://api.smugmug.com/services/embed/XXXXXXXXXXXX"

And in the custom CSS area:

.wrap-element {
position: relative;
padding-bottom: 56.25%; /* 16:9 → 9/16x100 */
overflow: hidden;
}

.wrapped-iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

1 Like

Just want to add that in addition to posting here I also submitted a support ticket for smug mug and the the response I got included : “The bad news is that we currently have a known bug that is causing issues with this behavior. I do not have a time frame for when that will be fixed, but I will be sure to add your email here to the case so you can be notified when it is done.”

Not sure if there is anything that folks here can suggest as a workaround in the meantime? Thanks again.

And this is the tutorial the support person sent a link to:
https://www.w3schools.com/howto/howto_css_responsive_iframes.asp