From 445165eb2d7debffe0ffce6c16b8019dbccd9ab5 Mon Sep 17 00:00:00 2001
From: Victor Yunenko <victor@what.digital>
Date: Sat, 11 Apr 2020 14:07:40 +0300
Subject: [PATCH] fix default player size (#57)

---
 MANIFEST.in                                   |  1 +
 .../static/djangocms_video/video_player.css   | 16 +++++++
 .../djangocms_video/default/video_player.html | 42 ++++++++++---------
 3 files changed, 40 insertions(+), 19 deletions(-)
 create mode 100644 djangocms_video/static/djangocms_video/video_player.css

diff --git a/MANIFEST.in b/MANIFEST.in
index 1cb1772..9af2913 100644
--- 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
new file mode 100644
index 0000000..aa6c2b2
--- /dev/null
+++ 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
index 87e220d..18bdcbe 100644
--- 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: