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: 714

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}  

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about templates