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:
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;
}