From 13ccdab70c481cdd81e4bb31f484b99da4409797 Mon Sep 17 00:00:00 2001 From: Rory Gibson Date: Wed, 22 Jan 2014 00:45:50 +0400 Subject: [PATCH] Added fitvid.js for responsive video support --- assets/css/style.css | 3 + assets/js/jquery.fitvids.js | 74 ++++++++++++++++++ assets/js/scripts.js | 6 ++ .../style.scssc | Bin 41935 -> 42240 bytes assets/sass/style.scss | 2 + default.hbs | 1 + 6 files changed, 86 insertions(+) create mode 100644 assets/js/jquery.fitvids.js diff --git a/assets/css/style.css b/assets/css/style.css index bc8bb222d..df4b66230 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -104,6 +104,9 @@ table { color: #000; display: block; } +.fluid-width-video-wrapper { + margin-bottom: 40px; } + /* ============================================================ */ /* General Appearance */ /* ============================================================ */ diff --git a/assets/js/jquery.fitvids.js b/assets/js/jquery.fitvids.js new file mode 100644 index 000000000..a8551f6e1 --- /dev/null +++ b/assets/js/jquery.fitvids.js @@ -0,0 +1,74 @@ +/*global jQuery */ +/*jshint multistr:true browser:true */ +/*! +* FitVids 1.0.3 +* +* Copyright 2013, 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 + }; + + if(!document.getElementById('fit-vids-style')) { + + var div = document.createElement('div'), + ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0], + cssStyles = '­'; + + div.className = 'fit-vids-style'; + div.id = 'fit-vids-style'; + div.style.display = 'none'; + div.innerHTML = cssStyles; + + ref.parentNode.insertBefore(div,ref); + + } + + if ( options ) { + $.extend( settings, options ); + } + + return this.each(function(){ + var selectors = [ + "iframe[src*='player.vimeo.com']", + "iframe[src*='youtube.com']", + "iframe[src*='youtube-nocookie.com']", + "iframe[src*='kickstarter.com'][src*='video.html']", + "object", + "embed" + ]; + + if (settings.customSelector) { + selectors.push(settings.customSelector); + } + + var $allVideos = $(this).find(selectors.join(',')); + $allVideos = $allVideos.not("object object"); // SwfObj conflict patch + + $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('
').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%"); + $this.removeAttr('height').removeAttr('width'); + }); + }); + }; +// Works with either jQuery or Zepto +})( window.jQuery || window.Zepto ); diff --git a/assets/js/scripts.js b/assets/js/scripts.js index 6bb2fc6d6..2bf24182e 100644 --- a/assets/js/scripts.js +++ b/assets/js/scripts.js @@ -1,5 +1,11 @@ jQuery(function($) { + /* ============================================================ */ + /* Responsive Videos */ + /* ============================================================ */ + + $(".post-content").fitVids(); + /* ============================================================ */ /* Scroll To Top */ /* ============================================================ */ diff --git a/assets/sass/.sass-cache/4c0f184ddf523d9e41705de4a1576d5b51e21674/style.scssc b/assets/sass/.sass-cache/4c0f184ddf523d9e41705de4a1576d5b51e21674/style.scssc index 2f44db6601533b0c597ab4dfdf965f7fac45fd01..c7b9865f5b14efcd3e8c7a3fc32a9251bfe79df5 100644 GIT binary patch delta 5093 zcmai2c~q3w74Q9&VHnT>BbyeO8P)*?Mi^OUM25{_aR3eCGN^0=qAVjIBrM{nF~%*G zo5d#7Ew-K-lSn<*6Pv`?G>6k@Qf*Fble8x_r%hswCLT=_&&ksF?zccPCnx{R{J!_z z{oUVP-h1E7UnYbtZwR)`w2ZV|U6Rw?+}5CTHgs<=YRp+~OLIm`PIGQkR#%M$Ik1kQ!0%~kQZ9@p!$dDmhtX()gjX#SBN5YaZD@GSE zWSe0Rq;qR!Z03j%n2LjT<>sJ zkfF*IfcqnK=*czUmSin{yxJx(zP#ij*n-~VQjJ&g$0*)TUI*JbQOI^q^bHY-5L;79 z;30f2r4)AHi>6w580%*yV}EKa?8LeXJM2Ppe*~VX2sZBGw)*L|II}Ij%a)+BB@X_K zE0V_*h$d4p?8fo>5&`xQ>0S&@D+${tE81l<)yQ}|Zb++vQ3`XEdnljINoA;V&BQBt z4nVw?G8_Mqu0>aR7CeS0qRMc+IT#PA!f6ETATm_Bf>mh znKAGT7C2)u%aRDkD3Gm|B>1%$!f`Q#*_2#eu3$v-a3KR!kNA!KbS zzzK}ZGQ+cCU!KI1SuS{m$#_|(+XlyTj+;>tSlGcDhp1B=~e#eaFsLN@eNQO zX93Dk<&aRLdrw z-Z-=_(c>HC!E{ovmKWd-^Ii&f(bSWKcgv&U3(}BP5fA^PbNnk-M)4f~ihF)f<>N^n zXP!jJGFb}u@VTlqfqhXH?@i6(J<6ipsl_k77ToP*o31_^FFRFO;&i~*xYt=6_Kh6+ zS5s<#8$Wig6$HR*p1BbKTu-P!tBasumCK)1JO-bvj0XW>v&qOUI~A5N6@L+Bn>Ke`?@;3RMW6zrO>* zxwU^dSs%r!n(TQJ_D!ZT!SbMBejAHNqz=cHh0qZhvrGq(JcantGWk9>pt)A=%^2)w z_`Ee2U#|^8du=vEQL2OUlBNmKz&1#=AjII!z5-zN?Kh_CN!|@#Ny-G1Bw-w1z8DPL zdxSxWmCa42EgVx;tc3(hTLLlrsd=l(7!MW|2k|E<=Lz_EzZ;U!v(gMkJhHM;NCteg zIuz%uDuh%{b6+aaBod8;ardecFyWO|>Fg6+Cap;%6we#MMESYy3dTm471F3a7hFk@ z&N7jJ!F6$gW<@|M>oXT*lHg48w30l@7(c66BnTF2XAAkVe9xDK+Sx)r?CYXoKK^}m z1vuMk~PNgp7rJh$vOmC@u zwz4w8Dy3llzHucl3e%$k(AlULia77jaZh6c6jRW})L6F~6ND1LoaVLQpe#Db%U#kd zV|D{4B5z#>x6EL}QnU`M^S*e8@yga}zA){1J9MpW82{|fg6h$hQhb*^*lRB7ZtyG$b6I8`L`a*~ghQftxnu>wjvI%$E9-3wiNmW?j1j+_W|KwZ{dvDB7Fp zY-q#Sj#OCB&j#3lr#qHH2em;51@Jy)Q^6{F?PqP!No^3{B_5G4bsDgvON}3O<_jLc zk!-d-HezSjdg$R?GkSTM;9@yuraI2ChEYy^|XPP zQ{U$$>NcX5Fn0AiV5@u=@7pA9Gj=ix+kw64l}!^KqD?kU*a6}xx06)vB&sKgO2P8| zzNOC~JOa`SU$h|XqC;&D9cp{Xa9rb)E@gtHOTprcazO$gkqXPuWOU5+%jt9j!)pF!Kf)Kzi*W~6sBhDbIJ_r`M7&9!|(%RiOQ;J>gwod5WTS@Jy2Rk-d`DN zV}Av(2Jt^YVPs(Wa8jy-1APjmOfX~F;NWm2`wxK;v(IUptJpsY+{sf)(GKv^VAqI0 zez4gD2kCS;gr1Sj?5F)_BS!Waxn(yTME1!v( z{VaKTiRvU{GzTW)7u$3hY(Q#Ch9eqrJ1hqiy} qpYh{=s_6!G9Sz;BZJnmZuHN3R4y(>$_B>$I;j4$sPM_Tq5&nM&$EP{~ delta 4809 zcmai2dvH|M8TUKE%?ro|^HLz$>~6?AWJ3~?EFqicW=VJ_fGi|zp2Q?1k?=}@kcfy( ziNKFqL6M-PzL3hG4t+S_Sf=$+)G1EeVG7u(#W!lL*wPL?=i7UCquUw(x%<24obUJj zzQ;ND-rezrc>A})J}WCHtI(7(zqO^qW18=|w=*@&*3z0+*wU7hpVMY*ZEf-twzlTy z&2E`JE4$5RYtC)TnN?7b-<+4X-=0iMPc{EK8C!-{(pKzB&8KZJ2Cbp(NJyK5)|7a( zq)nkgyjyrz%%I)k5NCtz6FW$U26rg-$C%%27B`0ZOVf_?t@6ms-Oq)yr)vo9z~0etO$JElaHTg86v$V znRU9r5j4-NqkSCcKII~Jf?A?OgL^XG&#_>2zLoZ)G%reC@1AbKTcIXF2e2o59s&Ce zR{Sg5j0dwL&|@#8A7gBj6L;B+IMN=2cWpE1CwSkvm>$8r90whiA(=4u-r#gPtQ@Wn zj7cAtLNthDEmcCAN(C{8b?t}k{y6r*)_Mn;W-X*6DwZin6!l(?MT4;QBxAHWLD1tI z$m3GC8LM*>=_rPB%Tbi8)Zc|qaucv!;ksyKp!lXoD0;i zk4ya;l=_o7iN`sF<9Z0k$AxeNy+h4{o<`*CYU&`oFyyhb&maY<>e5I_CmZ_;-WV= zVFiwqus3zG*SQn7ITq3dj`o5we2EQpsG_AJ6Fy%n<9VCY_YUuw%2IFYZkAdwS{jU` zG8bKxk*1_xR4ji93{oGLL3$z1l{sTB>S8XAi{^s2zy64k@>Keh?60+ms;H++O68PG zieDI1KWGr|3|rMc50?YlX?6)8R4hVAg&n<>1-Mi(6|Ys!M_y$%990!`6&Ku@LjE`! z(j(|98x`7%6y;Se=v7YE3}+I(&wHv@qQ7#x&U12`g#AtTbOm#&SJ5?2;58+!jiu>O zwLP_4@M*P)K2(_#^bwP9aal0Y6`^`A>=T{r8oqUP({)7_d|i=^8cB@ffJlj*r?T`Wkh$4*EtG(R+@6 zqXhiM5a3WBmkzxUbEM@YC+2%QXw`xg z`nP;0neo&DbIeUW72k~OhwHeqpi$5*uKz71>lP6netby ziw^$2eE-D64jrRmQ8fi&aznNVBJAIq5)nk>#ET#p7e~tlqwPtkS!|s;!8_|E@Sp6r zq-2mg8e@ygCZ@Tq;I5=}{N6oNUP~G>BhtNG-UCLYbFR{{aFvTPxHzw@O2L9v-dB+D z)kzUqKHrj2>!`ZbWn^RBHuhM~9(9c3Dx2JZF_fcvSYDOeobR~JVYfNbVVRgk@-6AUTbtBq0tbkVwYo5>6MKxDo`r%LZe~Q zF4kDUl)JEhjfV>Hk2MWcge9K4$&M2qC(YrWiEXmtIZq@WZ;ytjDT(HCGdO(Bkl|pG zGl9B%6H5y-CH|6+|_5xJ2^Tvr1OMKlT9eLHDbhwe~ zSx7w#$>$pRu)!UoJ=9Za8F$2T!m-eriDHG1tRAO3TFI?QqTEcff=P5NPZz6vD@dhP zc=(<&YQX4-Ik(C_D_do(fepGs1KP+p;a`NAomFviT-$CE`BUn~-p*laQX+zznDc(v zx=bbw2lDHS`npPfc#&kX{SXt!>|11T2ji5djGDQd9_&sEZ}ACl;&Y-M3F|V%T0SQb zzb*tXudAU>6~G;x9Kd;I)G)GpYN?AGw2L>w%RN@=#-*Mrv5w?BvOK?ga8K_&)W^l_ zV}{R}!G{fQgZ#itKyqJtxE$2d*oW19L)6ci>u0kGxYcJ0(Qp_(%ZpDG`dvVsbd$Dw z3%_HM^@Ap1s{T5!JeCvTXb!=&_2%#mK5_kUt#7BzoR!Ti&c$)#$$sCAqScLav0_h#7?@*Dba>- zZLoq4B4cYp@K@e(EZLeNM~1c*MaeaaPw_4`ug_0FBc@*7;1KI$1J`Wd^`F|xyx@#Rj_OgW(WmdMZbw0=`G g+0ozH-P`5qZ*`f);AzMGnIZW4Sk>td_r}Hk4<^< +