video_detail.html

{% extends 'base.html' %}

{% block title %} Video | {% endblock %}

<script>
    {% block jquery %}
        // Do this once before resizing
        var parent_id = $('iframe').parent().attr('id');
        if (parent_id === 'youtubeVideo') {
            $('iframe').addClass('embed-responsive-item');
            var parent_class = $('iframe').parent().attr('class');
            var parent_width = $('iframe').parent().width();
            console.log(parent_class);
            var width = $('iframe').css('width');
            var height = $('iframe').css('height');
            var ratio = parseInt(height) / parseInt(width);
            var new_height = parseInt(parent_width) * ratio;
            $('iframe').css('width', parent_width);
            $('iframe').css('height', new_height);
        }
        function update_iframe_size() {
            var parent_id = $('iframe').parent().attr('id');
            if (parent_id === 'youtubeVideo') {
                $('iframe').addClass('embed-responsive-item');
                var parent_class = $('iframe').parent().attr('class');
                var parent_width = $('iframe').parent().width();
                console.log(parent_class);
                var width = $('iframe').css('width');
                var height = $('iframe').css('height');
                var ratio = parseInt(height) / parseInt(width);
                var new_height = parseInt(parent_width) * ratio;
                $('iframe').css('width', parent_width);
                $('iframe').css('height', new_height);
            }
        }

        $(window).bind('resize', function () {
            // $('$('iframe')').width('80%');
            update_iframe_size();
        });
    {% endblock %}
</script>

{% block content %}
    <div class="container row">
        <h3>{{ object.title }}</h3>
        <p>
            <a href="https://twitter.com/home?status={{ object.get_share_message|safe }}">
                <i class="fa fa-twitter-square fa-3x"></i>
            </a>

            <a href="https://facebook.com/sharer/sharer.php?u={{ object.get_share_link|safe }}">
                <i class="fa fa-facebook-square fa-3x"></i>
            </a>

            <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ object.get_share_link|safe }}/&title={{ object.get_share_message|safe }}&summary={{ object.get_share_message|safe }}&source={{ object.get_share_link|safe }}/">
                <i class="fa fa-linkedin-square fa-3x"></i>
            </a>
        </p>
    </div>
    <!-- 16:9 aspect ratio -->
    <div id="youtubeVideo">
        {{ object.embed_code|safe }}
    </div>

    <hr>

    <div class="row">
        <div class="col-sm-12">
            <h1>Comments/Questions</h1>
            <a href="{{ object.get_absolute_url }}">Nowhere to comment? Click here</a>
            <form action="" method="POST">{% csrf_token %}
                {{ comment_form.as_p }}
                <input type="submit" value="Add comment">
            </form>

            {% for comment in comments %}
                <div class="container">
                    <div class="well">
                        <p style="font-size: 1.3em;"> {{ comment.text }} </p>
                        <p style="font-size: 0.9em;">
                            by {{ comment.user.username }} on {{ comment.timestamp }}
                        </p>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}