Replacing custom EmbedVideoBlock with wailtail EmbedBlock (#53)

coderedcms/blocks/html_blocks.py

@@ -12,6 +12,7 @@ from pygments.formatters import HtmlFormatter
 from wagtail.contrib.table_block.blocks import TableBlock as WagtailTableBlock
 from wagtail.core import blocks
 from wagtail.documents.blocks import DocumentChooserBlock
+from wagtail.embeds.blocks import EmbedBlock
 from wagtail.images.blocks import ImageChooserBlock
 
 from .base_blocks import BaseBlock, BaseLinkBlock, ButtonMixin, CoderedAdvTrackingSettings, LinkStructValue
@@ -128,18 +129,18 @@ class EmbedGoogleMapBlock(BaseBlock):
 
 class EmbedVideoBlock(BaseBlock):
     """
-    An embedded video on the page in an <iframe>. Currently supports youtube and vimeo.
+    Emedded media using stock wagtail functionality.
     """
-    url = blocks.URLBlock(
+    url = EmbedBlock(
         required=True,
         label=_('URL'),
-        help_text=_('Link to a YouTube or Vimeo video.'),
+        help_text=_('Link to a YouTube/Vimeo video, tweet, facebook post, etc.')
     )
 
     class Meta:
         template = 'coderedcms/blocks/embed_video_block.html'
         icon = 'media'
-        label = _('Embed Video')
+        label = _('Embed Media')
 
 
 class H1Block(BaseBlock):

coderedcms/templates/coderedcms/blocks/embed_video_block.html

@@ -1,12 +1,5 @@
-{% load coderedcms_tags %}
+{% extends "coderedcms/blocks/base_block.html" %}
 
-<div class="embed-responsive embed-responsive-16by9 {{self.settings.custom_css_class}}"
-{% if self.custom_css_id %}id="{{self.settings.custom_css_id}}"{% endif %}>
-	{% if self.url|get_embed_video_provider == 'youtube' %}
-		<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/{{ self.url|get_embed_video_code }}" frameborder="0" allowfullscreen></iframe>
-	{% endif %}
-
-	{% if self.url|get_embed_video_provider == 'vimeo' %}
-    	<iframe class="embed-responsive-item" width="640" height="360" src="https://player.vimeo.com/video/{{ self.url|get_embed_video_code }}" frameborder="0" allowfullscreen></iframe>
-	{% endif %}
-</div>
+{% block block_render %}
+{{self.url}}
+{% endblock %}

coderedcms/templates/wagtailembeds/embed_frontend.html

@@ -0,0 +1,21 @@
+{% 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 video with an absurdly high max width. #}
+{% embed embed.url max_width=3840 %}
+</div>