{% load sekizai_tags %}

{% addtoblock "css" %}
    <style>
        .cmsplugin_flexiblevideo {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
        }
        .cmsplugin_flexiblevideo iframe,
        .cmsplugin_flexiblevideo object,
        .cmsplugin_flexiblevideo embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .cmsplugin_flexiblevideo_video {
            display: none;
        }
    </style>
{% endaddtoblock %}

{% addtoblock "js" %}
    <script type="text/javascript">
        $(document).ready(function(){
            $('.cmsplugin_flexiblevideo').each(function() {
                var cover = $(this).find('.cmsplugin_flexiblevideo_cover')
                var video = $(this).find('.cmsplugin_flexiblevideo_video')
                cover.click(function() {
                    video.show();
                    cover.hide();
                });
            });
        });
    </script>
{% endaddtoblock %}
<div class="cmsplugin_flexiblevideo">
    <div class="cmsplugin_flexiblevideo_cover">
        <img src="{{ MEDIA_URL }}{{ cover }}" />
    </div>
    <div class="cmsplugin_flexiblevideo_video">
        {% if video_type == 'vimeo' %}
            <iframe src="http://player.vimeo.com/video{{ video_id }}?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        {% endif %}
        {% if video_type == 'youtube' %}
            <iframe type="text/html" src="http://www.youtube.com/embed/{{ video_id }}?wmode=transparent&autoplay=1" frameborder="0"></iframe>
        {% endif %}
    </div>
</div>