Permalink
Browse files

Moving things around

  • Loading branch information...
1 parent 86070a0 commit 5071335c3fc7b2c5e1ad33893c0b3d1a25719fcb @bitpshr committed Dec 15, 2012
Showing with 196 additions and 2 deletions.
  1. +113 −0 demo/css/app.css
  2. +2 −2 demo/index.html
  3. +81 −0 demo/js/jquery.fitvids.js
View
@@ -0,0 +1,113 @@
+@import url(http://fonts.googleapis.com/css?family=Righteous);
+
+body {
+ padding-bottom: 40px;
+}
+
+.download {
+ margin-top:35px;
+}
+
+.container-narrow {
+ margin: 0 auto;
+ max-width: 700px;
+}
+
+.container-narrow > hr {
+ margin: 30px 0;
+}
+
+.row-fluid{
+ margin-bottom:30px;
+}
+
+.dark{
+ background: #F7F7F7;
+ padding-bottom:30px;
+}
+
+.light {
+ padding-bottom:30px;
+}
+
+.top {
+ background:#282828;
+}
+
+.top h1{
+ color:#FFF;
+ font-family: 'Righteous', cursive;
+ font-size:180px;
+ display:block;
+ margin-bottom:15px;
+ line-height:1;
+ text-shadow: -1px -1px 0px #333;
+}
+
+.top p{
+ color:#999;
+ text-shadow: -1px -1px 0px #333;
+}
+
+.jumbotron {
+ margin: 40px 0;
+ text-align: center;
+}
+.jumbotron .btn {
+ font-size: 21px;
+ padding: 14px 24px;
+}
+
+.sectionTitle{
+ line-height: 100%;
+ font-style: italic;
+ font-family: Georgia, Times New Roman, serif;
+ font-size:70px;
+ padding:10px;
+ font-weight: normal;
+ text-shadow: -1px -1px 0px #666;
+ margin-top:25px;
+}
+
+.accent{
+ color: #FF7F00;
+ font-weight:bold;
+}
+
+/* Landscape phone to portrait tablet */
+@media (max-width: 767px) {
+ body{
+ padding:0 !important;
+ }
+
+ .top{
+ padding: 0 10px 0 10px !important;
+ }
+
+ .top h1{
+ font-size:84px !important;
+ }
+
+ .sectionTitle{
+ font-size:40px !important;
+ }
+}
+
+/* Landscape phones and down */
+@media (max-width: 480px) {
+ body{
+ padding:0 !important;
+ }
+
+ .top{
+ padding: 0 10px 0 10px !important;
+ }
+
+ .top h1{
+ font-size:84px !important;
+ }
+
+ .sectionTitle{
+ font-size:40px !important;
+ }
+}
View
@@ -7,7 +7,7 @@
<meta name="description" content="">
<meta name="author" content="">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
- <link href="app.css" rel="stylesheet">
+ <link href="css/app.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
@@ -85,7 +85,7 @@ <h1 class="sectionTitle"><span class="accent">4.</span> Holler stuff</h1>
</script>
<script type="text/javascript" src="../dist/holler-client.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
- <script src="jquery.fitvids.js"></script>
+ <script src="js/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
$(".top").fitVids();
View
@@ -0,0 +1,81 @@
+/*global jQuery */
+/*jshint multistr:true browser:true */
+/*!
+* FitVids 1.0
+*
+* Copyright 2011, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
+* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
+* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
+*
+* Date: Thu Sept 01 18:00:00 2011 -0500
+*/
+
+(function( $ ){
+
+ "use strict";
+
+ $.fn.fitVids = function( options ) {
+ var settings = {
+ customSelector: null
+ };
+
+ var div = document.createElement('div'),
+ ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0];
+
+ div.className = 'fit-vids-style';
+ div.innerHTML = '&shy;<style> \
+ .fluid-width-video-wrapper { \
+ width: 100%; \
+ position: relative; \
+ padding: 0; \
+ } \
+ \
+ .fluid-width-video-wrapper iframe, \
+ .fluid-width-video-wrapper object, \
+ .fluid-width-video-wrapper embed { \
+ position: absolute; \
+ top: 0; \
+ left: 0; \
+ width: 100%; \
+ height: 100%; \
+ } \
+ </style>';
+
+ ref.parentNode.insertBefore(div,ref);
+
+ if ( options ) {
+ $.extend( settings, options );
+ }
+
+ return this.each(function(){
+ var selectors = [
+ "iframe[src*='player.vimeo.com']",
+ "iframe[src*='www.youtube.com']",
+ "iframe[src*='www.youtube-nocookie.com']",
+ "iframe[src*='www.kickstarter.com']",
+ "object",
+ "embed"
+ ];
+
+ if (settings.customSelector) {
+ selectors.push(settings.customSelector);
+ }
+
+ var $allVideos = $(this).find(selectors.join(','));
+
+ $allVideos.each(function(){
+ var $this = $(this);
+ if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
+ var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
+ width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
+ aspectRatio = height / width;
+ if(!$this.attr('id')){
+ var videoID = 'fitvid' + Math.floor(Math.random()*999999);
+ $this.attr('id', videoID);
+ }
+ $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
+ $this.removeAttr('height').removeAttr('width');
+ });
+ });
+ };
+})( jQuery );

0 comments on commit 5071335

Please sign in to comment.