Status of youtube embeds

Help
1

hi there i enjoyed trying out this platform but when i tried out embedding youtube there were some issues with responsive design. i had tried width=100% but it didn’t seem to be the best solution as it makes a small video on desktop.

i was wondering if there is another way to embed media on write.as in a user-friendly way that will also be mobile responsive?

2

It seems to work just fine even in mobile view on this one. All I do is just paste the link to the video. I was trying to upload a screenshot but it wouldn’t let me. So just head over to the site and enable browser dev tools and turn on mobile view.

In my other blog, I would actually copy and paste the embed code from YouTube itself, but I have specific responsive CSS for that one.

1 Like
3

Hi dino, that is what i’m looking for - to be able to just post a link and it turns into a video like how substack works. but in my case i paste a link to youtube, and it just renders as a link on the front end of the post.

4

Are you using Write.as or WriteFreely? I believe the auto embedding with just a YouTube link is only a Write.as feature.

5

i am using write.as if that helps

6

It should automatically work then if you’re using write.as. You should only need to copy the url from YouTube and paste it into a post.

If that still that doesn’t work, here is a workaround. First up is the custom css that makes the embedded YouTube videos responsive.

Custom CSS:

/* 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%;
}

Then the next part is how to make use of the custom css. To do so, you have to wrap the YouTube embed code with a div that points to the video-container class. Like so:

<div class="video-container">youtube embed code goes here</div>

Note that for this workaround to work, you have to use the embed code itself. Just copying the url from YouTube won’t work.