{% extends 'xprez/contents/base.html' %}
{% load thumbnail xprez %}

{% block css_class_extra %}xprez-video {{ content.width }}-width {% if content.poster_image %}js-video-with-poster{% endif %}{% endblock %}

{% block content_in %}
    <div class="xprez-video-item">
        {% if content.poster_image %}
            <style>
                .xprez-video-poster-{{ content.video_id }} {
                    {% thumbnail content.poster_image "500x278" crop="50%" format="WEBP" quality=70 as thumb %}
                    background-image: url({{ thumb.url|build_absolute_uri }});
                    {% endthumbnail %}
                }
                @media only screen and (min-width: 400px) {
                    .xprez-video-poster-{{ content.video_id }} {
                    {% thumbnail content.poster_image "1000x555" crop="50%" format="WEBP" quality=70 as thumb %}
                    background-image: url({{ thumb.url|build_absolute_uri }});
                    {% endthumbnail %}
                    }
                }
                @media only screen and (min-width: 800px) {
                    .xprez-video-poster-{{ content.video_id }} {
                    {% thumbnail content.poster_image "1400x777" crop="50%" format="WEBP" quality=70 as thumb %}
                    background-image: url({{ thumb.url|build_absolute_uri }});
                    {% endthumbnail %}
                    }
                }
                @media only screen and (min-width: 1200px) {
                    .xprez-video-poster-{{ content.video_id }} {
                    {% thumbnail content.poster_image "1700x944" crop="50%" format="WEBP" quality=70 as thumb %}
                    background-image: url({{ thumb.url|build_absolute_uri }});
                    {% endthumbnail %}
                    }
                }
            </style>
            <div class="js-poster xprez-video-poster-{{ content.video_id }}"></div>
        {% endif %}
        <iframe
            id="video-{{ content.pk }}"
            width="560" height="315"
            frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
            allow="autoplay"
            {% if content.video_type == 'youtube' %}
                class="js-youtube" src="https://www.youtube.com/embed/{{ content.video_id }}?enablejsapi=1"
            {% elif content.video_type == 'vimeo' %}
                class="js-vimeo" src="https://player.vimeo.com/video/{{ content.video_id }}?color=ffffff&portrait=0&badge=0&api=1"
            {% endif %}
        ></iframe>
    </div>
{% endblock %}
