Middleman Helper for Responsive Youtube Videos

I've always hated how YouTube videos look when embedded on my site. They are always the wrong width, letterboxed, or just weird.

After reading this post, I decided to make writing the containing element easier on myself, especially since I write blog posts from my phone or iPad these days.

The finished helper looks like this and accepts a normal (non-embed) youtube watch link:

youtube("https://www.youtube.com/watch?v=boro0iyBjjM")

Because this is a ruby helper, any blog post that uses it will have to have the .erb file extension so that the ruby server will parse it.¹

Here's the helper:

  def youtube(url)
    @video_id = URI.decode_www_form(URI(url).query).to_h["v"]
    concat %{
<div class="youtube-container">
  <iframe
    width="100%"
    height="100%"
    src="https://www.youtube.com/embed/#{@video_id}"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>
    }
  end

Here's the corresponding CSS:

.youtube-container {
  height: 0;

  position: relative;

  padding-bottom: 56.25%;
  padding-top: 30px;

  overflow: hidden;

  iframe, object, embed {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;
  }
}

And here's the final result!

youtube("https://www.youtube.com/watch?v=j2_dJY_mIys")

Transforms into:

Now that I think about it, I could re-implement this as a Vue component, and then it would not depend on having .erb at the end of the file… but this works. I could also write shortcuts or Drafts actions to insert the correct HTML, but whatever. It works. Enough over optimizing, back to writing!

Fun fact: this post started as a copy/paste of the git commit for the change (Literally git show | pbcopy -> Drafts.app). Now I'm thinking about writing a transformation script that changes a git show into a postable markdown blog post... 🤔