Full Screen Video Tumblr

Posted by Kodi Lane on Stack Overflow See other posts from Stack Overflow or by Kodi Lane
Published on 2011-11-22T01:44:29Z Indexed on 2011/11/22 1:50 UTC
Read the original article Hit count: 750

Filed under:

I have a tumblr theme seen on http://www.kodilane.com and i am trying to make my Video Posts full screen. I have tried editing the code but i can only get the pictures to stretch. I have attached the template i have so far, if you can spot the changes that need to be done to make the video posts stretch full screen like the pictures do i would really appreciate it. Thank You - Kodi

<!DOCTYPE html>
<html lang="en">
<head>
    <title>{Title} {block:PostSummary}- {PostSummary}{/block:PostSummary}</title>

    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">

    {block:Description}
    <meta name="description" content="{MetaDescription}" />
    {/block:Description}
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    {block:Posts}
        <meta name="if:Reverse Description" content="0"/>
        <meta name="if:Include Attribution" content="1"/>
        <meta name="image:Background" content="http://static.tumblr.com/ffvtarv/QxLlmnswt/kims4.jpeg"/>
        <meta name="font:Body" content="Arial, Helvetica, sans"/>
        <meta name="color:Body Text" content="#fff"/>
        <meta name="color:Link" content="#d5d5d5"/>
        <meta name="color:Hover" content="#fff"/>
        <style type="text/css"> 

        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed, 
        figure, figcaption, footer, header, hgroup, 
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure, 
        footer, header, hgroup, menu, nav, section {
            display: block;
        }

        body {
            line-height: 1;
            font-family: {font:Body};
        }

        ol, ul, .bigcats li {
            list-style: none;
        }
        .main ol{
            list-style:decimal; 
            margin-left:25px;
            margin-bottom:10px; 
        }
        .main ul{
            list-style: disc;
            margin-left:25px;
            margin-bottom:10px; 
        }
        blockquote, q {
            quotes: none;
            font-style: italic;
            padding:7px 7px;    
            display:block;
        }
        ol.notes blockquote a{
            line-height:22px;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        strong{
            color:#9d9d9d;
            font-weight: bold;
        }
        em{
            font-style: italic;
        }
        {block:IfNotReverseDescription}
        .article{
            max-width:420px;
            position:fixed;
            bottom:43px;
            right:0;
        }
        {/block:IfNotReverseDescription}
        {block:IfReverseDescription}
        .article{
            max-width:420px;
            position:fixed;
            bottom:43px;
            left:0;
        }
        {/block:IfReverseDescription}
        h1, h2{
            position:absolute;
            top:-9999px;
            left:-9999px;
        }
        .nav{
            width:100%;
            padding: 10px 0px 10px 0px;
            text-align:left;
            z-index: 10;
            color:{color:Link};
            margin-left:5px;

        }
        .navwrap{
            background-color:#000;
            position:fixed;
            width:100%;
            bottom:0px;
            clear:both;


            /* Firefox 3.6+ */
            background: -moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0.8));

            /* Safari 4-5, Chrome 1-9 */
            background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0.8)));

            /* Safari 5.1+, Chrome 10+ */
            background: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0.8));

            /* Opera 11.10+ */
            background: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0.8));
            padding-bottom:2px;
            box-shadow:0px 0px 3px #000000;
        }


        .nav ul li{
            display:inline;
            font-size:13px; 
            text-transform:uppercase;
            color:{color:Link}; 
            list-style:none;
            text-align:center;  
        }
        .nav li{
            list-style: none;
        }
        .nav ul li a, .nav ul li a:visited {
            color:{color:Link};
            padding: 10px 10px 3px 10px;

        }
        .nav ul li a:hover{
            color:{color:Hover};
        }

        a{
            text-decoration:none;
        }
        .main a{
            border-bottom: 1px {color:Link} dotted;
            color: {color:Link};
            padding: 0 1px;
        }
        .main a:hover, .main a:focus{
            color:{color:Hover};
            border-bottom: transparent 1px solid;
        }
        a:visited, .main a:visited, {
            color: {color:Link};
        }
        a:active {outline: none;}

        ol.notes, ol.notes li{
            margin-bottom:2px;
            line-height:16px;
        }

        .audiometa{
            padding-bottom:10px;
        }
        h3.push{
            margin-bottom:10px;
        }
        h3{
            margin-bottom:10px;
        }
        h3 a{
            margin-bottom:10px;
            font-size:16px;
            color:{color:Hover};
        }
        .main, .tags{
            color:{color:Body Text};
            display:block;
            padding: 15px;
            font-size: 12px;
            line-height: 16px;
            text-align: left;
                    /* fallback */
            background-color: #000;

            /* Firefox 3.6+ */
            background: -moz-linear-gradient(left, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0.6));

            /* Safari 4-5, Chrome 1-9 */
            background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .8)), to(rgba(0, 0, 0, 0.6)));

            /* Safari 5.1+, Chrome 10+ */
            background: -webkit-linear-gradient(left, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0.6));

            /* Opera 11.10+ */
            background: -o-linear-gradient(left, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0.6));

            margin-top:5px;
            box-shadow:0px 0px 3px #000000
        }
        .tags{
            padding: 5px 15px;
            padding-bottom:7px;
        }
            .main iframe, .main embed{
                margin-left:-5px;
                margin-top:-5px;
            }
        a.more-link, .tags a, .meta a{
            line-height:18px;
            font-size:10px;
            border-bottom: 1px #888 dotted;
            color: {color:Link};
            padding: 0 1px; 
            margin: 0 2px;
        }
        p.meta{
            margin-bottom:5px;
        }
        .tags a:hover, a.more-link:hover{
            color:{color:Hover};
            border-bottom: 1px #FFF dotted;
        }
        .pagination{
            color: {color:Body Text};

            padding: 10px 15px;
            font-size: 10px;
            line-height: 16px;
            text-align: left;
                    /* fallback */
            background-color: #000;
            /* Firefox 3.6+ */
            background: -moz-linear-gradient(left, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0.6));

            /* Safari 4-5, Chrome 1-9 */
            background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .8)), to(rgba(0, 0, 0, 0.6)));

            /* Safari 5.1+, Chrome 10+ */
            background: -webkit-linear-gradient(left, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0.6));

            /* Opera 11.10+ */
            background: -o-linear-gradient(left, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0.6));

            margin-top:5px;
            box-shadow:0px 0px 3px #000000
        }
        .pagination:hover{
            /* Firefox 3.6+ */
            background: -moz-linear-gradient(left, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0.8));

            /* Safari 4-5, Chrome 1-9 */
            background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0.8)));

            /* Safari 5.1+, Chrome 10+ */
            background: -webkit-linear-gradient(left, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0.8));

            /* Opera 11.10+ */
            background: -o-linear-gradient(left, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0.8));    
        }

        #nextslide {
            width:48%;
            height:100%;
            background: url(http://static.tumblr.com/szanjxb/vI6lmo15u/forward.png) no-repeat right center,
            url(http://static.tumblr.com/ffvtarv/gemlmnsks/next-shadow.png) repeat-y right;
            position:fixed;
            top:0;
            right:0;
            float:left;
            opacity:0;
            filter:alpha(opacity=0);
            -webkit-transition: opacity .5s ease-out;
            -moz-transition: opacity .5s ease-out;
            -o-transition: opacity .5s ease-out;
            overflow:none;
        }
        p{
            margin-bottom: 10px;
        }
        p:last-child{
            margin-bottom: 0px;
        }
        #prevslide{
            width:48%;
            float:left;
            height:100%;
            background: url(http://static.tumblr.com/szanjxb/MSClmo15g/back.png) no-repeat left center,
            url(http://static.tumblr.com/ffvtarv/bKulmnsl6/prev-shadow.png) repeat-y left;
            position:fixed;
            top: 0;
            left: 0;
            opacity:0;
            filter:alpha(opacity=0);
            -webkit-transition: opacity .5s ease-out;
            -moz-transition: opacity .5s ease-out;
            -o-transition: opacity .5s ease-out;
        }

        #nextslide:hover, #prevslide:hover{
            filter:alpha(opacity=100);
            opacity:1.0;
            -webkit-transition: opacity .2s ease-out;
            -moz-transition: opacity .2s ease-out;
            -o-transition: opacity .2s ease-out;
        }

        p.time{
            padding-bottom:10px;
            margin-bottom:10px;
            text-align: right;
        }

        .left{
            float:left;
        }
        .right{
            float:right;
        }

        .button{
            position:fixed;
            bottom: 9px;
            right: 15px;
            line-height:12px;
            font-size:13px; 
            color:{color:Link};
            cursor: pointer;
            float:left;
            padding-bottom:1px; 
            border-bottom: 2px solid transparent;
        }
        .button:hover{
            color:{color:Link};
        }
        .notes{
            line-height: 11px;
        }
        ol.notes li{
            list-style: none;
        }

        .clear {
            clear: both;
            display: block;
            overflow: hidden;
            visibility: hidden;
            width: 0;
            height: 0;
        }
        .hidden{
            display:none;
        }


    {block:Photo}
        body {background: url({PhotoURL-HighRes}) no-repeat center center fixed black;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;}
    {/block:Photo}

    {block:Text}
        body {background: url({image:Background}) no-repeat center center fixed black;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;}

    {/block:Text}
    {block:Video}
        body {background: url({image:Background}) no-repeat center center fixed black;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;}
    {/block:Video}
    {block:Quote}
        body {background: url({image:Background}) no-repeat center center fixed black;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;}
    {/block:Quote}
    {block:Link}
        body {background: url({image:Background}) no-repeat center center fixed black;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;}
    {/block:Link}
    {block:Audio}
        body {background: url({image:Background}) no-repeat center center fixed black;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;}
        {block:AlbumArt}
        body{
            background: url({AlbumArtURL}) no-repeat center center fixed black;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        {/block:AlbumArt}       


    {/block:Audio}
    {block:Answer}
        body {background: url({image:Background}) no-repeat center center fixed black;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;}
    {/block:Answer}
    {block:Chat}
        body {background: url({image:Background}) no-repeat center center fixed black;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;}
    {/block:Chat}

    {CustomCSS}
        </style>

    <script src="http://static.tumblr.com/ffvtarv/W6Llmnske/jquery-git.js"></script>
    <script src="http://static.tumblr.com/ffvtarv/QpUlmnsje/jquery.cookie.js"></script>
    <script>
        var uiStatus = $.cookie("uiStatus")
        $(document).ready(function(){
        if(uiStatus == 'hidden') {
                $(".article,.navwrap").hide()
            };
        $(".button").click(function () {
            $(".article,.navwrap").fadeToggle("slow", "swing");
            if(uiStatus == 'hidden') {
                $.cookie("uiStatus", "visible");
            }
            else {
                $.cookie("uiStatus", "hidden");
            };
        });
        });
    </script>
</head>

<h1><a href="/">{Title}</a></h1>
<h2>{Description}</h2>

<!-- Main Side Navigation -->
{block:Pagination} 

    {block:PreviousPage}
    <a href="{PreviousPage}" title="Next Post"><div id="nextslide"></div></a>   
    {/block:PreviousPage}

    {block:NextPage}
    <a href="{NextPage}" title="Previous Post"><div id="prevslide"></div></a>
    {/block:NextPage}

{/block:Pagination}     

{block:PermalinkPagination} 

    {block:PreviousPost}
    <a href="{PreviousPost}" title="Previous Post"><div id="prevslide"></div></a>
    {/block:PreviousPost}

    {block:NextPost}
    <a href="{NextPost}" title="Next Post"><div id="nextslide"></div></a>
    {/block:NextPost}

{/block:PermalinkPagination}

<div class="article">

    {block:Pagination}  

        {block:PreviousPage}
        <a href="{PreviousPage}" title="Newer Post"><div class="pagination">Newer Post</div></a>
        {/block:PreviousPage}

        {block:NextPage}
        <a href="{NextPage}" title="Older Post"><div class="pagination">Older Post</div></a>
        {/block:NextPage}

    {/block:Pagination}

    {block:PermalinkPagination} 

        {block:NextPost}
        <a href="{NextPost}" title="Newer Post"><div class="pagination">Newer Post</div></a>
        {/block:NextPost}

        {block:PreviousPost}
        <a href="{PreviousPost}" title="Older Post"><div class="pagination">Older Post</div></a>
        {/block:PreviousPost}

    {/block:PermalinkPagination}

{block:HasTags}

    <div class="tags">

    {block:Tags}
    <a href="{TagURL}">{Tag}</a>
    {/block:Tags}

    </div>

{/block:HasTags}

    <div class="main">

{block:Photo}
    {block:Caption}
       {Caption}
    {/block:Caption}
{/block:Photo} 

{block:Video}
    {Video-400}
    {block:Caption}
        {Caption}
    {/block:Caption}
{/block:Video}

{block:Link}
    <h3><a href="{URL}" target="{Target}">{Name}</a></h3>
    {block:Description}
        {Description}
    {/block:Description}
{/block:Link}

{block:Quote}
    <h3>{Quote}</h3>
        {block:Source}
            <strong><p>{Source}</p></strong>
        {/block:Source}
{/block:Quote}

{block:Audio}

    {AudioPlayerBlack}

    <div class="audiometa">
    {block:Artist}
        {Artist}
    {/block:Artist}

    {block:Album}
        {Album}
    {/block:Album}

    {block:TrackName}
        {TrackName}
    {/block:TrackName}
    </div>

    {block:Caption}
        {Caption}
    {/block:Caption}

{/block:Audio}

{block:Chat}

    <h3 class="push">{Title}</h3>
    {block:Lines}
        <p class="chat {Alt}"><strong>{block:Label}{Label}{/block:Label}</strong> {Line}</p>
    {/block:Lines}

{/block:Chat}

{block:Text}
        {Body}
{block:Text}

        <p class="meta">
        <a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" title="Reblog this" class="more-link left">Reblog</a>
        <span class="hidden">{block:Photo}{LinkOpenTag}Source{LinkCloseTag}{/block:Photo}</span>
        <a href="{Permalink}" title="Permalink{PhotoAlt}" class="more-link right notes">{NoteCountWithLabel}</a>
        </p>
        <div class="clear"></div>
    </div>              

</div>

<script type="text/javascript">
document.onkeyup = KeyCheck;       

function KeyCheck(e)
    {
       var KeyID = (window.event) ? event.keyCode : e.keyCode;

       switch(KeyID)
       {

{block:Pagination}  

{block:PreviousPage}
              case 39:
          window.location = "{PreviousPage}";
          break;          
{/block:PreviousPage}

{block:NextPage}
            case 37:
          window.location = "{NextPage}";
          break;
{/block:NextPage}

{/block:Pagination}

{block:PermalinkPagination}

{block:PreviousPost}
          case 39:
          window.location = "{NextPost}";
          break;
{/block:PreviousPost}

{block:NextPost}
          case 37:
          window.location = "{PreviousPost}";
          break;
{/block:NextPost}

{/block:PermalinkPagination}    
       }
    }
</script>


<div class="navwrap">
    <div class="nav">

    <ul>

        <li><a href="/" title="{Title}">KODI LANE</a></li>

        <li><a href="/archive" title="Archive of posts">Archive</a></li>

        {block:AskEnabled}<li><a href="/ask" title="Ask">{AskLabel}</a></li>{/block:AskEnabled}

        {block:SubmissionsEnabled}<li><a href="/submit" title="Submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}


        {block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}

        {block:IfIncludeAttribution}<li><a href="http://jonathanhaggard.com/">Theme by Jon</a></li>{/block:IfIncludeAttribution}
    </ul>

    </div>
</div>    

<div class="button">HIDE/SHOW UI</div>
{/block:Posts}

Developer IT

Full Screen Video Tumblr - Developer IT

Full Screen Video Tumblr

jQuery

templates

tumblr

Related posts about jQuery

Microsoft and jQuery

An Introduction to jQuery Templates

Ajax Control Toolkit December 2013 Release

jQuery show "loading" during slow operation

Tracking download of non-html (like pdf) downloads with jQuery and Google Analytics

Related posts about templates

2 Templates to one SharePoint Library, Default templates

Adobe InDesign templates and design templates' cross-compatibility

Package operation failed when updating 12.04

An Introduction to jQuery Templates

Mailman Error / Cpanel

Categories cloud