Basic Themes - Large Player

The below design instructions are for the Basic themes only. By using these modifications, you agree to these terms (click here)

The theme modifications: 

  • - Place a larger and centered display player on playback pages 
  • - Moves related video content for the category to the lower part of the page, to the right of the video metadata description

Image and video hosting by TinyPic

Instructions

1) Add the following code to your CSS file 

.main-column.video-playback {
    width: 100%;  
}
.widget-tabs h2{
    font-weight: bold;
}
.runtime{
    font-style: italic;
    border-left: 1px solid rgba(0,0,0,0.2);
    margin-left: .5em;
    padding-left: .5em;
}

2) REPLACE the current code in your Index file with the following code 

{% extends base_template %}
{% load tagging_tags %}
{% load comments_tags %}
{% load item_extras %}
{% load sites_extras %}
{% load distro_extras %}
{% block title %}{{ item.headline }}{% if item.group %} - {{ item.group }}{% endif %} - {{ current_site.name }}{% endblock title %}
{% block description %}{% if item.summary %}<meta name="description" content="{{ item.summary }}" />{% endif %}{% endblock description %}
{% block meta %}
    {% twitter_card_tags item card_type %}{% if item.valid_youtube %}
        <meta property="og:type" content="video.other" />
        <meta property="og:video" content="http://www.youtube.com/v/{{ item.valid_youtube }}?version=3&amp;autohide=1" />
        <meta property="og:video:height" content="224" />
        <meta property="og:video:width" content="398" />
        <meta property="og:video:type" content="application/x-shockwave-flash" />
    {% else %}
        <meta property="og:type" content="video.other" />
        <meta property="og:video" content="http://{{ current_site.domain }}{{ request.get_full_path }}" />
        <meta property="og:video:type" content="text/html" />
    {% endif %}
    <meta property="og:title" content="{{ item.headline }}" />
    <meta property="og:url" content="http://{{ current_site.domain }}{{ request.get_full_path }}" />
    <meta property="og:image" content="http:{{ item.get_custom_thumbnail_url }}" />
    <meta property="og:site_name" content="{{ current_site.name }}" />
    <meta property="og:description" content="{{ item.summary }}" />
{% endblock meta %}
{% block bodyid %} id="details"{% endblock bodyid %}
{% block canonical %}<link rel="canonical" href="http://{{ current_site.domain }}/{{ item.code }}/" />{% endblock canonical %}
 
{% block content %}
    {% if item %}
        {% tags_for_object item as tags %}
        <div class="section">
            <div class="main-column">
                <div class="page-header">
                    <p class="meta">
                        {% if item.group %}
                            <span class="group {{ item.group.short_name }}">{{ item.group.get_html_tag|safe }}</span>
                        {% endif %}
                        <span class="date">Last updated: {{ item.pub_date|date:"F j, Y" }}</span>
                        <span class="runtime">Run time {{item.video.length }} </span>
                        {% if edit_state = 'can_edit' %}
                            <span class="edit">
                                <a href="{{ item.get_absolute_url }}edit/">edit this video</a>
                            </span>
                        {% endif %}
                        {% if edit_state = 'can_feature' %}
                            <span class="edit">
                                <a href="{{ item.get_absolute_url }}?feature_video">feature this video</a>
                            </span>
                        {% endif %}
                        {% if edit_state = 'is_featured' %}
                            <span class="edit">
                                <a href="/admin/videos/playlists/">This video is featured on your home page</a>
                            </span>
                        {% endif %}
                    </p>
                    <h1>{{ item.headline }}</h1>
                </div>
            </div>
        </div>
        <div class="section-offset">
            <div class="section">
                <div class="main-column video-playback">
                    <div class="video-wrap">
                        {% get_player_html item %}
                    </div>
                     
                    {% block sharing_buttons %} 
                        {% if current_site.siteprofile.social_enabled %}{% include include_sharing_buttons %}{% endif %}
                    {% endblock %}
                     
                </div>
            </div>
        </div>
        <div class="section">
            <div class="main-column">
                {% include include_transcript %}
                 
                {% if item.summary %}
                {% if not current_site.siteprofile.longtext_sync or item.desc = '' %}
                <div class="summary">
                    <p>{{ item.summary }}</p>
                </div>
                {% endif %}
                {% endif %}
                {% if item.desc %}
                <div class="description">
                    {{ item.desc|safe|urlize|linebreaks }}
                </div>
                {% endif %}
                {% if tags %}
                <div class="tags">
                    <p>Tagged with {% for tag in tags %}{% if not forloop.first %}, {% endif %}<a href="/videos/tagged/{{ tag|urlencode }}/" rel="tag">{{ tag }}</a>{% endfor %}.</p>
                </div>
                {% endif %}
                {% if current_site.siteprofile.allow_comments %}
                {% comments_for_object item as comments %}
                <div id="comments">
                    {% if comments %}
                    <div class="block comment-list">
                        <div class="block-header">
                            <h3>Comments</h3>
                        </div>
                        <ol>
                            {% for comment in comments %}
                            <li id="comment{{ comment.id }}" class="{% if comment.poster_is_registered %}registered{% else %}unregistered{% endif %}">
                                <div class="avatar">
                                    <img src="{{ comment.get_poster_gravatar_url }}" alt="" />
                                </div>
                                <div class="text">
                                    {{ comment.comment|urlize|linebreaks }}
                                </div>
                                <div class="meta">
                                    <p><strong>{{ comment.get_poster_html_tag|safe }}</strong>, {{ comment.date|timesince }} ago.</p>
                                </div>
                            </li>
                            {% endfor %}
                        </ol>
                    </div>
                    {% endif %}
                    <div class="block simple-form{% if user.is_authenticated %} authenticated{% else %} unauthenticated{% endif %}">
                        <div class="block-header">
                            <h3>Post a Comment</h3>
                        </div>
                        {% comment_form_for_object item %}
                    </div>
                </div>
                {% endif %}
            </div>
            <div class="sub-column">
                <div class="widget-tabs">
                        <h2>More videos</h2>
                    <div class="content">
                        <div id="related-videos" class="video-list on">
                            {% get_items_by_filters related_video_list related_to_id=item.id max_items=10 %}
                            {% if related_video_list %}
                            <ol>
                                {% for related_item in related_video_list %}
                                <li>
                                    <a class="thumbnail" href="{{ related_item.get_absolute_url }}" title="watch {{ item.headline }}"><img src="{% fetch_thumbnail_url related_item 120 68 %}" alt="video thumbnail for {{ item.headline }}" /><span></span></a>
                                    <h4><a href="{{ related_item.get_absolute_url }}">{{ related_item.headline }}</a></h4>
                                </li>
                                {% endfor %}
                            </ol>
                            {% else %}
                            <p>There are no related videos for this video.</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <div class="section">
            <div class="page-header">
                <h1>Item not found.</h1>
            </div>
        </div>
    {% endif %}
{% endblock content %}
{% block page-scripts %}
        {% if item.geo_long %}
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
        {% endif %}
{% endblock page-scripts %}