[Vertigo M&C] responsive iframe, overlay, video

diff --git a/app/themes/base/static/src/sass/modules/_live-streaming.scss b/app/themes/base/static/src/sass/modules/_live-streaming.scss
index 9e36fc41a04765afd266c791a4a0d17bf1bb157f..34f96a922eb9ab0dc4ddd6a4e56942e05cefd661 100644 (file)
--- a/app/themes/base/static/src/sass/modules/_live-streaming.scss
+++ b/app/themes/base/static/src/sass/modules/_live-streaming.scss
@@ -26,27 +26,37 @@ $module: ".page--live-streaming";
         margin-bottom : 30px;
     }
     & .page__content {
-
         text-align: center;
-
+        height: 720px;
+        padding-left: 70px;
+        padding-right: 70px;
     }
 
     video {
-        margin-top: 30px;
     }
 
+    iframe {
+        height: 100%;
+        max-height: 720px;
+
+        @include mq($until: sm) {
+            max-height: 690px;
+        }
+    }
     .countdown-overlay {
         background: #000000 none repeat scroll 0 0;
         color: white;
+        font-family: "Oswald",sans-serif;
         font-size: 2em;
-        height: 720px;
-        left: 70px;
+        height: 100%;
+        max-height: 720px;
+        padding-left: 70px;
+        padding-right: 70px;
         position: absolute;
         top: 60px;
-        width: 1280px;
+        left: 0px;
+        width: 100%;
         z-index: 90;
-        vertical-align: auto;
-        font-family: "Oswald",sans-serif;
     }
 
     #countdown-title {

diff --git a/app/themes/base/templates/media/live_streaming/base.html b/app/themes/base/templates/media/live_streaming/base.html
deleted file mode 100644 (file)
index 3e3fd0b..0000000
--- a/app/themes/base/templates/media/live_streaming/base.html
+++ /dev/null
@@ -1,174 +0,0 @@
-{% extends "base.html" %}
-{% load i18n mezzanine_tags keyword_tags organization_tags pages_tags %}
-
-{% block meta_title %}{{ page.meta_title }}{% endblock %}
-
-{% block meta_keywords %}{% metablock %}
-{% keywords_for page as keywords %}
-{% for keyword in keywords %}
-    {% if not forloop.first %}, {% endif %}
-    {{ keyword }}
-{% endfor %}
-{% endmetablock %}{% endblock %}
-
-{% block meta_description %}{% metablock %}
-{{ page.description }}
-{% endmetablock %}{% endblock %}
-
-{% block main %}
-
-    {% block hero %}
-    {% endblock %}
-
-    <div class="page page--{% spaceless %}{% block page_class %}{% endblock %}{% endspaceless %}">
-        <div class="container">
-
-            <div class="row">
-
-                <div class="col-sm-16 col-md-12 col-md-push-2 tac">
-                    {% block page_title %}
-                        {{ page.title }}
-                    {% endblock %}
-                </div>
-
-            </div>
-
-            <div class="row">
-
-                <div class="col-md-2 page__sidebar">
-
-                    <div style="position: relative;">
-                        {% block page_sidebar %}
-                        {% endblock %}
-                    </div>
-
-                </div>
-
-                <div class="mb2 col-sm-16 col-md-12 page__content" data-summary-content>
-                    {% block page_content %}
-                        {{ page.content }}
-                    {% endblock %}
-                    {% block page_link %}
-                        {% with object.links.all as links %}
-                            {% if links %}
-                                {% include 'core/inc/link.html' %}
-                            {% endif %}
-                        {% endwith %}
-                    {% endblock %}
-                    {% block page_file %}
-                        {% with object.files.all as files %}
-                            {% if files %}
-                                {% include 'core/inc/files.html' %}
-                            {% endif %}
-                        {% endwith %}
-                    {% endblock %}
-                    {% block page_audio %}
-                        {% for related in object.playlists.all %}
-                            {% with related.playlist as playlist %}
-                                {% if playlist.type == 'audio' %}
-                                    {% include 'media/inc/playlist_audio_detail.html' %}
-                                {% endif %}
-                            {% endwith %}
-                        {% endfor %}
-                    {% endblock %}
-                </div>
-
-            </div>
-
-        </div>
-
-        {% block page_slider %}
-        {% with object.images.all|get_type:'page_slider' as slider_images %}
-            {% if slider_images %}
-                {% include 'core/inc/slider.html' %}
-            {% endif %}
-        {% endwith %}
-        {% endblock %}
-
-        {% block page_video %}
-            {% for related in object.playlists.all %}
-                {% with related.playlist as playlist %}
-                    {% if playlist.type == 'video' %}
-                        {% include 'media/inc/playlist_video_slider.html' %}
-                    {% endif %}
-                {% endwith %}
-            {% endfor %}
-        {% endblock %}
-
-        <div class="">
-
-            {% block page_person_list %}
-            {% endblock %}
-
-            {% block page_demo %}
-            {% endblock %}
-
-            {% block page_blog %}
-            {% endblock %}
-
-            {% block page_sub_content %}
-                {% with object.blocks.all as blocks %}
-                    {% include "core/inc/block.html" %}
-                {% endwith %}
-            {% endblock %}
-
-            {% block related_project %}
-            {% endblock %}
-
-            {% block products %}
-                {% if page.product_lists.all|length > 0 %}
-                    {% for page_product_list in page.product_lists.all %}
-                      {% with page_product_list.list as list %}
-                        {% with "shop/includes/product_list_"|add:list.style|add:"_style.html" as template %}
-                          {% include template %}
-                        {% endwith %}
-                      {% endwith %}
-                    {% endfor %}
-                {% endif %}
-            {% endblock %}
-
-            {% block page_sub_content_2 %}
-            {% endblock %}
-
-            {% block page_person_list_team %}
-            {% endblock %}
-
-            {% block page_sub_content_3 %}
-            {% endblock %}
-
-            {% block logo %}
-                {% with page.images.all|get_type:'logo' as images %}
-                    {% if images %}
-                        <div class="page__block{% if block.background_color %} page__block--{{ block.background_color }}{% endif %}">
-                            <div class="white-bg pb2">
-                                <div class="container">
-                                    <div class="row" data-summary-content>
-                                        <div class="col-sm-16">
-                                            <ul class="partners-list">
-                                                {% include 'core/inc/logo.html' %}
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    {% endif %}
-                {% endwith %}
-            {% endblock %}
-
-        </div>
-
-    </div>
-
-    <div>
-
-        {% block page_related_content %}
-            {% with dynamic_content=page.dynamic_content_pages.all|filter_content object=page %}
-                {% include "core/inc/related_content.html" %}
-            {% endwith %}
-        {% endblock %}
-
-    </div>
-
-
-{% endblock %}

diff --git a/app/themes/base/templates/media/live_streaming/live_streaming_detail.html b/app/themes/base/templates/media/live_streaming/live_streaming_detail.html
index 09b145b9f7d31cfc5469050f09bb079b7a05d7ce..fef8b508f0259dd9982b3b6f85f1b480875cbf00 100644 (file)
--- a/app/themes/base/templates/media/live_streaming/live_streaming_detail.html
+++ b/app/themes/base/templates/media/live_streaming/live_streaming_detail.html
@@ -21,19 +21,15 @@
 
     {% if type == "youtube" %}
         {% if object.youtube_id %}
-            <p class="intro">{% trans "If the YouTube streaming does not work, try the HTML5 version by" %} <a href="{% url 'organization-streaming-detail' slug 'html5' %}" title="">{% trans "clicking here" %}</a></>
-
-            <div style="position:relative;height:0;padding-bottom:75.0%">
-                <iframe src="https://www.youtube.com/embed/{{ object.youtube_id }}?ecver=2" width="1280" height="720" frameborder="0" allowfullscreen></iframe>
-            </div>
+            <p class="intro">If YouTube streaming is not working, try HTML5 version by <a href="{% url 'organization-streaming-detail' slug 'html5' %}" title="">clicking here</a></p>
+            <iframe src="https://www.youtube.com/embed/{{ object.youtube_id }}?ecver=2" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
         {% else %}
             <p>Please fill youtube id</p>
         {% endif %}
     {% elif type == "html5" %}
         {% if object.html5_url %}
-            <p class="intro">{% trans "If the HTML5 streaming does not work, try the YouTube version by" %} <a href="{% url 'organization-streaming-detail' slug 'youtube' %}" title="">{% trans "clicking here" %}</a></>
-
-            <video id="live-streaming" width="1280" height="720"  controls autoplay>
+            <p class="intro">If HTML5 streaming is not working, try Youtube version by <a href="{% url 'organization-streaming-detail' slug 'youtube' %}" title="">clicking here</a></p>
+            <video id="live-streaming" width="100%" height="100%"  controls autoplay>
                 <source src="{{ object.html5_url }}" type="video/webm">
             </video>
         {% else %}

diff --git a/app/themes/base/templates/media/media_base.html b/app/themes/base/templates/media/media_base.html
index cfe5065b02374b34d1ccaa2104f6efc6353a7721..ad9d892fec4b65555fa5ecfccc17942bd5c2a03e 100644 (file)
--- a/app/themes/base/templates/media/media_base.html
+++ b/app/themes/base/templates/media/media_base.html
@@ -22,7 +22,7 @@
 
             <div class="row">
 
-                <div class="mb2 col-sm-16 col-md-12 col-lg-16 page__content" data-summary-content>
+                <div class="mb2 col-sm-16 col-lg-16 page__content" data-summary-content>
                     {% block page_content %}
                         {{ page.content }}
                     {% endblock %}