Full Screen Video Tumblr
- by Kodi Lane
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}
