fix default player size (#57)

django-cms · Apr 16, 2020 · 445165e · 445165e
1 parent 8123e8d
commit 445165e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 19 deletions.
diff --git a/MANIFEST.in b/MANIFEST.in
@@ -2,4 +2,5 @@ include LICENSE
 include README.rst
 recursive-include djangocms_video/locale *
 recursive-include djangocms_video/templates *
+recursive-include djangocms_video/static *
 recursive-exclude * *.py[co]
diff --git a/djangocms_video/static/djangocms_video/video_player.css b/djangocms_video/static/djangocms_video/video_player.css
@@ -0,0 +1,16 @@
+.djangocms-video-plugin {
+    position: relative;
+    /* this is the height of a 16:9 box */
+    padding-bottom: calc(100% / (16/9));
+    padding-top: 30px;
+    height: 0;
+    overflow: hidden;
+}
+
+.djangocms-video-plugin iframe, object, embed, video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
diff --git a/djangocms_video/templates/djangocms_video/default/video_player.html b/djangocms_video/templates/djangocms_video/default/video_player.html
@@ -1,23 +1,27 @@
-{% load i18n cms_tags %}
+{% load i18n cms_tags static %}
 
-{% if instance.embed_link %}
-    {# show iframe if embed_link is provided #}
-    <iframe src="{{ instance.embed_link_with_parameters }}" {{ instance.attributes_str }} frameborder="0" allowfullscreen="true"></iframe>
-    {% with disabled=instance.embed_link %}
-        {% for plugin in instance.child_plugin_instances %}
-            {% render_plugin plugin %}
-        {% endfor %}
-    {% endwith %}
-{% else %}
-    {# render <source> or <track> plugins #}
-    <video controls {{ instance.attributes_str }}
-        {% if instance.poster %} poster="{{ instance.poster.url }}"{% endif %}>
-        {% for plugin in instance.child_plugin_instances %}
-            {% render_plugin plugin %}
-        {% endfor %}
-        {% trans "Your browser doesn't support this video format." %}
-    </video>
-{% endif %}
+<link rel="stylesheet" type="text/css" href="{% static 'djangocms_video/video_player.css' %}"/>
+
+<div class="djangocms-video-plugin">
+    {% if instance.embed_link %}
+        {# show iframe if embed_link is provided #}
+        <iframe src="{{ instance.embed_link_with_parameters }}" {{ instance.attributes_str }} frameborder="0" allowfullscreen="true"></iframe>
+        {% with disabled=instance.embed_link %}
+            {% for plugin in instance.child_plugin_instances %}
+                {% render_plugin plugin %}
+            {% endfor %}
+        {% endwith %}
+    {% else %}
+        {# render <source> or <track> plugins #}
+        <video controls {{ instance.attributes_str }}
+            {% if instance.poster %} poster="{{ instance.poster.url }}"{% endif %}>
+            {% for plugin in instance.child_plugin_instances %}
+                {% render_plugin plugin %}
+            {% endfor %}
+            {% trans "Your browser doesn't support this video format." %}
+        </video>
+    {% endif %}
+</div>
 
 {% comment %}
     # Available variables: