Eleventy Satisfactory

Post with some videos, audio, and other media

It’s common to place third party audio, video, gists, etc. on a page using iframes. There’s a shortcode to do this for YouTube and Vimeo.

Video shortcode

The video shortcode can work with YouTube and Vimeo URLs.

Youtube Video

This code:

{% video "https://www.youtube.com/embed/9qOvG9KeJ6c" %}

Produces:

Vimeo Video

The same shortcode can be used for Vimeo videos.

{% video "https://vimeo.com/35396305" %}

Produces:

Unconstrained full width video

Add the argument unconstrained to the shortcode to let the video go full width across the page.

{% video "https://www.youtube.com/watch?v=DppVAQqaNE4", "unconstrained" %}

Produces:

Straight up HTML

It is possible to paste the iframe code directly in Markdown. This works with YouTube, Vimeo and any other video sources.

Here is an example from Twitch.tv. Remember to remove the height and width, and wrap the iframe code in a div with class=“video” as shown here.

<div class="video">
<iframe src="https://clips.twitch.tv/embed?clip=ManlyFamousBananaStoneLightning&parent=code.mendhak.com&parent=localhost" frameborder="0" allowfullscreen="true" scrolling="no"></iframe>
</div>

Produces:

Soundcloud audio

For Soundcloud, there’s no need to change the height and width. Just copy pasting the iframe code works.