Responsive Embeds with Wagtail and Bootstrap 4

Wagtail’s embed package allows content authors to insert videos, tweets, and various other embedded content by just inserting a URL. With Bootstrap 4, we can make these fairly smart. Wagtail provides a ratio for some types of embedded content. Have a look at how we can analyze the ratio to use different responsive Bootstrap 4 ratios in this Django template, which I use to override the template provided by Wagtail’s embed package:

{% load wagtailembeds_tags %}

{% if embed.ratio %}
    {# If an aspect ratio is included, use the appropriate Bootstrap 4 class #}
    {% if embed.ratio > 0.9 %}
        <div class="embed-responsive embed-responsive-1by1">
    {% elif embed.ratio > 0.7 %}
        <div class="embed-responsive embed-responsive-4by3">
    {% elif embed.ratio > 0.5 %}
        <div class="embed-responsive embed-responsive-16by9">
    {% else %}
        <div class="embed-responsive embed-responsive-21by9">
    {% endif %}
{% else %}
    {# Otherwise, center it in a row, for things like Tweets. #}
    <div class="row justify-content-center">
{% endif %}

{# Embed the content with an absurdly high max width. #}
{% embed embed.url max_width=3840 %}
</div>

What this does is look to see if Wagtail passes us a ratio for the embedded content, which it should for content with an aspect ratio, such as video. It will then choose the appropriate Bootstrap 4 class for that ratio - as best as it can, from four possible aspect ratios provided by Bootstrap 4.

If no ratio is available, it creates a center row, with the embed creating the height. Thanks to Bootstrap 4, this will also scale properly on small screens. You can see this in action with a video on this post.