Viewport?

Help Customization
1

Anyone know if using the viewport meta tag is a way to make pages more responsive across multiple devices? And if so, how to implement them here on Write.as?

2

You don’t need to implement the viewport meta tag. It’s automatically added to the header of the pages on your blog/site when you publish it.

viewport
viewport815×94 11.8 KB

1 Like
3

I appreciate that help. I’m struggling to get a particular video embed to be responsive on mobile devices. It spills way out to the right and I’ve tried a bunch of different things to get it to be"full size" on a larger device while also fitting into the viewing window on a smaller device. SO far, nothing has been successful.

4

Below is the custom CSS I use on my site to handle video embeds. To use it, you have to wrap the embed script with a div element, like this: <div class="video-container">embed script goes here</div>. More instructions here.

What kind of video are you trying to embed? I ask because Write.as recently added support for rich media embeds. All you have to do, for say a youtube video, is to paste the link to the video, and it will automatically be rendered in a responsive design on a page.

/* Responsive Video Container */
#post-body .video-container {
    margin-bottom: -20px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
1 Like
5 
[quote="dino, post:4, topic:2595"]
    <div class="video-container">embed script goes here</div>
    [/quote]

Hi Dino,
Thank you for this. The rich embeds work great for things like YouTube. Unfortunately, this video is hosted on smug mug. From a support email they’ve sent me, I think there may be a bug on their side they haven’t been able to fix yet.

If I use the smug mug embed code alone, the video spills over to the right on mobile devices.

(Ideally) What I’d like to show up on the page is a video centered inside a container with the play button right in the middle.

When I use your code (thank you again!) it gets the video to fit within the width of the screen on the device…

But it only shows the upper left quadrant of the video preview (and a quarter of the circle outline of the video play button.

I bet it’s hard to visualize what I’m trying to explain. The video is an animation my kids made. For their privacy I’m not wanting to post a complete link here.

But does this code from smug mug offer any clues as to what the problem could be?:

<iframe allow="fullscreen" allowfullscreen="true" frameborder="0" scrolling="no" width="640" height="360" src="https://api.smugmug.com/services/embed/XXXXXXXXXXXXXXXX?width=640&height=360&albumId=XXXXXXXXXXXX=XXXXXXXX"></iframe>

Any idea what to do differently to get the desired result?

Thank you,
Christine

6

Based on what I can picture from your explanation, the video no longer overflows to the right side of the screen. However, only a part of the video is showing up, instead of the whole thing.

Based on the iframe sample code you have there, it looks like the only thing you can play around with is the height and width attributes. Maybe try setting them to a smaller value to see if it helps? Other than that, I honestly don’t know what else to change to try and make it work.

1 Like
7

Thank you! I really appreciate the ideas. I did mess around with the size attributes and haven’t had any luck yet.

I will keep trying:-)

1 Like