Resizing wagtail embedded videos

Question

Hello im new to wagtail . Originally , i saw that we were able to conveniently embed videos via draftail , however i was unable to give it any styling. Therefore i swapped methods and so far i have been using the following implementation to embed videos into my project.

blocks.py

class VideoBlock(blocks.StreamBlock):
'''rich text'''
title = blocks.CharBlock(required=True, help_text="Add your Title")
texts = blocks.TextBlock(required=True, help_text="Add your additional text")
embed = EmbedBlock()

class Meta:
    template = "streams/video_block.html"
    icon = "edit"
    label = "Full Rich Text

video_block.html

{% load wagtailembeds_tags %}


{%for content in self %}
    <div class="container" style="text-align: center;">
    {{content}}
    {% embed page.video_url %}
    </div>
{%endfor%}

That being said , I still do not know how to properly resize it. I would preferably want my website to look like this : here

Answer 1

i found a really good link over her : here

Heres my code if anybody is interested:

video_block.html

{% load wagtailembeds_tags %}
{% load video_tag%}
<br>
{%for content in self %}
    <div class="container">
        {%for con in content.value%}
        <h1>{{con.title}}</h1>
        <p>{{con.text}}</p>
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="{{ con.video.url |embedurl}}?rel=0" allowfullscreen></iframe>
          </div>
        {%endfor%}
    </div>
{%endfor%}

templatetags/video_tag.py

import re
from django import template

register = template.Library()

@register.filter(name="embedurl")
def get_embed_url_with_parameters(url):
    print('we inside this emb')
    if "youtube.com" in url or "youtu.be" in url:
        regex = r"(?:https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)"  # Get video id from URL
        embed_url = re.sub(
            regex, r"https://www.youtube.com/embed/\1", url
        )  # Append video id to desired URL
        print(embed_url)
        embed_url_with_parameters = embed_url + "?rel=0"  # Add additional parameters
        return embed_url_with_parameters
    else:
        return None

Answer 2

I was looking for answer for days but I found it here: https://docs.wagtail.org/en/stable/topics/writing_templates.html#responsive-embeds

for some reason it did not show up on google

Short of it is:

1. in your base settings file add this WAGTAILEMBEDS_RESPONSIVE_HTML = True
2. In the template file you are using the embed with add these styles:

.responsive-object {
    position: relative;
}

.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

and BOOM responsive embeddeds