From bae451943b43c59139702e131b1acdabc3f5e529 Mon Sep 17 00:00:00 2001
From: Sanjiv Jha <narutosanjiv@gmail.com>
Date: Fri, 4 Apr 2014 19:45:31 +0530
Subject: [PATCH 1/2] fixed the root link

---
 app/views/layouts/application.html.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 3bca916f..b9b15005 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -21,7 +21,7 @@
     .wrap
       .navbar.navbar-default
         .navbar-header
-          %a.navbar-brand(href="#") Brails
+          %a.navbar-brand(href="/") Brails
         .navbar-collapse.collapse
           - if user_signed_in? && current_user.roles == 'admin'
             %ul.nav.navbar-nav

From 35abd3d8e39542890827a1e9d99db4bde7665a51 Mon Sep 17 00:00:00 2001
From: Sanjiv Jha <narutosanjiv@gmail.com>
Date: Sat, 5 Apr 2014 12:53:25 +0530
Subject: [PATCH 2/2] added accessible you tube player

---
 app/assets/images/control_play.png  | Bin 0 -> 592 bytes
 app/assets/javascripts/swfobject.js |   5 +
 app/assets/javascripts/ytp.js       | 531 ++++++++++++++++++++++++++++
 app/assets/stylesheets/ytp.css      | 107 ++++++
 app/views/contents/index.html.haml  |   8 +-
 5 files changed, 650 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/images/control_play.png
 create mode 100644 app/assets/javascripts/swfobject.js
 create mode 100644 app/assets/javascripts/ytp.js
 create mode 100644 app/assets/stylesheets/ytp.css

diff --git a/app/assets/images/control_play.png b/app/assets/images/control_play.png
new file mode 100644
index 0000000000000000000000000000000000000000..0846555d0ca84cb99d4c70dad80144a232604041
GIT binary patch
literal 592
zcmV-W0<ZmvP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz;z>k7R5;6}
zlgp~&KoEw{L*<?F02!S)t2}{-f+Fa~jiL(|t^|>wq6jM9+RMU)_iNO6K~b@$|K=nj
zb2!5=4Mjq_zrU*f>U<E<$N$71ANu{i)a&)MZnvv<Ivs;CX0%!@z1eJP^?F_UR)E7Y
zhuM0)rt|qskH<sA>2#vSVnMZ9ja4cY`AdOM*t}k^goWqfa3Iq(>2kS<ZxAh)%Vw!m
zlHUYA%Vrk5+wEw(-BLcEC&Mskv)K@;vP5)UXW494vITg*nsvZ}0Xm&ODVNI$c)47P
zz#0q&luD&ETY#ITLm8z4w6Z!JP7yq#fZ+rDK!QXfq1yuOcH4ki`~6<P$hcaqIP4JN
za{Z!ewMw(uObFd>H;P81hAqIyBm_{t1>+!KRdtb~{1AK7>C~<w5{bM78jXey$I*t>
zD-Nov`UX!X6ET_La7f{B_|*cRuZGR%^C`gjd@jmW6h*+;8;{2{8ja|Fzf-YTq+l@k
zGLg?!DijI~9$+CG0<Z-lD-z(H!;FXYc9AlfjGRuVO}LMP$K%ni2A2t$A;Lk^=kv*5
zUgcymDaYe+##<6Cz!UV0xnq<ZWFC)4{`O~z#bQz@6w(5LfbRGE4X@X0a7cH%-5P(F
e{`xomYy1XAMnBX=w?zy90000<MNUMnLSTYI+7W61

literal 0
HcmV?d00001

diff --git a/app/assets/javascripts/swfobject.js b/app/assets/javascripts/swfobject.js
new file mode 100644
index 00000000..08fb2700
--- /dev/null
+++ b/app/assets/javascripts/swfobject.js
@@ -0,0 +1,5 @@
+/* SWFObject v2.1 <http://code.google.com/p/swfobject/>
+	Copyright (c) 2007-2008 Geoff Stearns, Michael Williams, and Bobby van der Sluis
+	This software is released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
+*/
+var swfobject=function(){var b="undefined",Q="object",n="Shockwave Flash",p="ShockwaveFlash.ShockwaveFlash",P="application/x-shockwave-flash",m="SWFObjectExprInst",j=window,K=document,T=navigator,o=[],N=[],i=[],d=[],J,Z=null,M=null,l=null,e=false,A=false;var h=function(){var v=typeof K.getElementById!=b&&typeof K.getElementsByTagName!=b&&typeof K.createElement!=b,AC=[0,0,0],x=null;if(typeof T.plugins!=b&&typeof T.plugins[n]==Q){x=T.plugins[n].description;if(x&&!(typeof T.mimeTypes!=b&&T.mimeTypes[P]&&!T.mimeTypes[P].enabledPlugin)){x=x.replace(/^.*\s+(\S+\s+\S+$)/,"$1");AC[0]=parseInt(x.replace(/^(.*)\..*$/,"$1"),10);AC[1]=parseInt(x.replace(/^.*\.(.*)\s.*$/,"$1"),10);AC[2]=/r/.test(x)?parseInt(x.replace(/^.*r(.*)$/,"$1"),10):0}}else{if(typeof j.ActiveXObject!=b){var y=null,AB=false;try{y=new ActiveXObject(p+".7")}catch(t){try{y=new ActiveXObject(p+".6");AC=[6,0,21];y.AllowScriptAccess="always"}catch(t){if(AC[0]==6){AB=true}}if(!AB){try{y=new ActiveXObject(p)}catch(t){}}}if(!AB&&y){try{x=y.GetVariable("$version");if(x){x=x.split(" ")[1].split(",");AC=[parseInt(x[0],10),parseInt(x[1],10),parseInt(x[2],10)]}}catch(t){}}}}var AD=T.userAgent.toLowerCase(),r=T.platform.toLowerCase(),AA=/webkit/.test(AD)?parseFloat(AD.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):false,q=false,z=r?/win/.test(r):/win/.test(AD),w=r?/mac/.test(r):/mac/.test(AD);/*@cc_on q=true;@if(@_win32)z=true;@elif(@_mac)w=true;@end@*/return{w3cdom:v,pv:AC,webkit:AA,ie:q,win:z,mac:w}}();var L=function(){if(!h.w3cdom){return }f(H);if(h.ie&&h.win){try{K.write("<script id=__ie_ondomload defer=true src=//:><\/script>");J=C("__ie_ondomload");if(J){I(J,"onreadystatechange",S)}}catch(q){}}if(h.webkit&&typeof K.readyState!=b){Z=setInterval(function(){if(/loaded|complete/.test(K.readyState)){E()}},10)}if(typeof K.addEventListener!=b){K.addEventListener("DOMContentLoaded",E,null)}R(E)}();function S(){if(J.readyState=="complete"){J.parentNode.removeChild(J);E()}}function E(){if(e){return }if(h.ie&&h.win){var v=a("span");try{var u=K.getElementsByTagName("body")[0].appendChild(v);u.parentNode.removeChild(u)}catch(w){return }}e=true;if(Z){clearInterval(Z);Z=null}var q=o.length;for(var r=0;r<q;r++){o[r]()}}function f(q){if(e){q()}else{o[o.length]=q}}function R(r){if(typeof j.addEventListener!=b){j.addEventListener("load",r,false)}else{if(typeof K.addEventListener!=b){K.addEventListener("load",r,false)}else{if(typeof j.attachEvent!=b){I(j,"onload",r)}else{if(typeof j.onload=="function"){var q=j.onload;j.onload=function(){q();r()}}else{j.onload=r}}}}}function H(){var t=N.length;for(var q=0;q<t;q++){var u=N[q].id;if(h.pv[0]>0){var r=C(u);if(r){N[q].width=r.getAttribute("width")?r.getAttribute("width"):"0";N[q].height=r.getAttribute("height")?r.getAttribute("height"):"0";if(c(N[q].swfVersion)){if(h.webkit&&h.webkit<312){Y(r)}W(u,true)}else{if(N[q].expressInstall&&!A&&c("6.0.65")&&(h.win||h.mac)){k(N[q])}else{O(r)}}}}else{W(u,true)}}}function Y(t){var q=t.getElementsByTagName(Q)[0];if(q){var w=a("embed"),y=q.attributes;if(y){var v=y.length;for(var u=0;u<v;u++){if(y[u].nodeName=="DATA"){w.setAttribute("src",y[u].nodeValue)}else{w.setAttribute(y[u].nodeName,y[u].nodeValue)}}}var x=q.childNodes;if(x){var z=x.length;for(var r=0;r<z;r++){if(x[r].nodeType==1&&x[r].nodeName=="PARAM"){w.setAttribute(x[r].getAttribute("name"),x[r].getAttribute("value"))}}}t.parentNode.replaceChild(w,t)}}function k(w){A=true;var u=C(w.id);if(u){if(w.altContentId){var y=C(w.altContentId);if(y){M=y;l=w.altContentId}}else{M=G(u)}if(!(/%$/.test(w.width))&&parseInt(w.width,10)<310){w.width="310"}if(!(/%$/.test(w.height))&&parseInt(w.height,10)<137){w.height="137"}K.title=K.title.slice(0,47)+" - Flash Player Installation";var z=h.ie&&h.win?"ActiveX":"PlugIn",q=K.title,r="MMredirectURL="+j.location+"&MMplayerType="+z+"&MMdoctitle="+q,x=w.id;if(h.ie&&h.win&&u.readyState!=4){var t=a("div");x+="SWFObjectNew";t.setAttribute("id",x);u.parentNode.insertBefore(t,u);u.style.display="none";var v=function(){u.parentNode.removeChild(u)};I(j,"onload",v)}U({data:w.expressInstall,id:m,width:w.width,height:w.height},{flashvars:r},x)}}function O(t){if(h.ie&&h.win&&t.readyState!=4){var r=a("div");t.parentNode.insertBefore(r,t);r.parentNode.replaceChild(G(t),r);t.style.display="none";var q=function(){t.parentNode.removeChild(t)};I(j,"onload",q)}else{t.parentNode.replaceChild(G(t),t)}}function G(v){var u=a("div");if(h.win&&h.ie){u.innerHTML=v.innerHTML}else{var r=v.getElementsByTagName(Q)[0];if(r){var w=r.childNodes;if(w){var q=w.length;for(var t=0;t<q;t++){if(!(w[t].nodeType==1&&w[t].nodeName=="PARAM")&&!(w[t].nodeType==8)){u.appendChild(w[t].cloneNode(true))}}}}}return u}function U(AG,AE,t){var q,v=C(t);if(v){if(typeof AG.id==b){AG.id=t}if(h.ie&&h.win){var AF="";for(var AB in AG){if(AG[AB]!=Object.prototype[AB]){if(AB.toLowerCase()=="data"){AE.movie=AG[AB]}else{if(AB.toLowerCase()=="styleclass"){AF+=' class="'+AG[AB]+'"'}else{if(AB.toLowerCase()!="classid"){AF+=" "+AB+'="'+AG[AB]+'"'}}}}}var AD="";for(var AA in AE){if(AE[AA]!=Object.prototype[AA]){AD+='<param name="'+AA+'" value="'+AE[AA]+'" />'}}v.outerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'+AF+">"+AD+"</object>";i[i.length]=AG.id;q=C(AG.id)}else{if(h.webkit&&h.webkit<312){var AC=a("embed");AC.setAttribute("type",P);for(var z in AG){if(AG[z]!=Object.prototype[z]){if(z.toLowerCase()=="data"){AC.setAttribute("src",AG[z])}else{if(z.toLowerCase()=="styleclass"){AC.setAttribute("class",AG[z])}else{if(z.toLowerCase()!="classid"){AC.setAttribute(z,AG[z])}}}}}for(var y in AE){if(AE[y]!=Object.prototype[y]){if(y.toLowerCase()!="movie"){AC.setAttribute(y,AE[y])}}}v.parentNode.replaceChild(AC,v);q=AC}else{var u=a(Q);u.setAttribute("type",P);for(var x in AG){if(AG[x]!=Object.prototype[x]){if(x.toLowerCase()=="styleclass"){u.setAttribute("class",AG[x])}else{if(x.toLowerCase()!="classid"){u.setAttribute(x,AG[x])}}}}for(var w in AE){if(AE[w]!=Object.prototype[w]&&w.toLowerCase()!="movie"){F(u,w,AE[w])}}v.parentNode.replaceChild(u,v);q=u}}}return q}function F(t,q,r){var u=a("param");u.setAttribute("name",q);u.setAttribute("value",r);t.appendChild(u)}function X(r){var q=C(r);if(q&&(q.nodeName=="OBJECT"||q.nodeName=="EMBED")){if(h.ie&&h.win){if(q.readyState==4){B(r)}else{j.attachEvent("onload",function(){B(r)})}}else{q.parentNode.removeChild(q)}}}function B(t){var r=C(t);if(r){for(var q in r){if(typeof r[q]=="function"){r[q]=null}}r.parentNode.removeChild(r)}}function C(t){var q=null;try{q=K.getElementById(t)}catch(r){}return q}function a(q){return K.createElement(q)}function I(t,q,r){t.attachEvent(q,r);d[d.length]=[t,q,r]}function c(t){var r=h.pv,q=t.split(".");q[0]=parseInt(q[0],10);q[1]=parseInt(q[1],10)||0;q[2]=parseInt(q[2],10)||0;return(r[0]>q[0]||(r[0]==q[0]&&r[1]>q[1])||(r[0]==q[0]&&r[1]==q[1]&&r[2]>=q[2]))?true:false}function V(v,r){if(h.ie&&h.mac){return }var u=K.getElementsByTagName("head")[0],t=a("style");t.setAttribute("type","text/css");t.setAttribute("media","screen");if(!(h.ie&&h.win)&&typeof K.createTextNode!=b){t.appendChild(K.createTextNode(v+" {"+r+"}"))}u.appendChild(t);if(h.ie&&h.win&&typeof K.styleSheets!=b&&K.styleSheets.length>0){var q=K.styleSheets[K.styleSheets.length-1];if(typeof q.addRule==Q){q.addRule(v,r)}}}function W(t,q){var r=q?"visible":"hidden";if(e&&C(t)){C(t).style.visibility=r}else{V("#"+t,"visibility:"+r)}}function g(s){var r=/[\\\"<>\.;]/;var q=r.exec(s)!=null;return q?encodeURIComponent(s):s}var D=function(){if(h.ie&&h.win){window.attachEvent("onunload",function(){var w=d.length;for(var v=0;v<w;v++){d[v][0].detachEvent(d[v][1],d[v][2])}var t=i.length;for(var u=0;u<t;u++){X(i[u])}for(var r in h){h[r]=null}h=null;for(var q in swfobject){swfobject[q]=null}swfobject=null})}}();return{registerObject:function(u,q,t){if(!h.w3cdom||!u||!q){return }var r={};r.id=u;r.swfVersion=q;r.expressInstall=t?t:false;N[N.length]=r;W(u,false)},getObjectById:function(v){var q=null;if(h.w3cdom){var t=C(v);if(t){var u=t.getElementsByTagName(Q)[0];if(!u||(u&&typeof t.SetVariable!=b)){q=t}else{if(typeof u.SetVariable!=b){q=u}}}}return q},embedSWF:function(x,AE,AB,AD,q,w,r,z,AC){if(!h.w3cdom||!x||!AE||!AB||!AD||!q){return }AB+="";AD+="";if(c(q)){W(AE,false);var AA={};if(AC&&typeof AC===Q){for(var v in AC){if(AC[v]!=Object.prototype[v]){AA[v]=AC[v]}}}AA.data=x;AA.width=AB;AA.height=AD;var y={};if(z&&typeof z===Q){for(var u in z){if(z[u]!=Object.prototype[u]){y[u]=z[u]}}}if(r&&typeof r===Q){for(var t in r){if(r[t]!=Object.prototype[t]){if(typeof y.flashvars!=b){y.flashvars+="&"+t+"="+r[t]}else{y.flashvars=t+"="+r[t]}}}}f(function(){U(AA,y,AE);if(AA.id==AE){W(AE,true)}})}else{if(w&&!A&&c("6.0.65")&&(h.win||h.mac)){A=true;W(AE,false);f(function(){var AF={};AF.id=AF.altContentId=AE;AF.width=AB;AF.height=AD;AF.expressInstall=w;k(AF)})}}},getFlashPlayerVersion:function(){return{major:h.pv[0],minor:h.pv[1],release:h.pv[2]}},hasFlashPlayerVersion:c,createSWF:function(t,r,q){if(h.w3cdom){return U(t,r,q)}else{return undefined}},removeSWF:function(q){if(h.w3cdom){X(q)}},createCSS:function(r,q){if(h.w3cdom){V(r,q)}},addDomLoadEvent:f,addLoadEvent:R,getQueryParamValue:function(v){var u=K.location.search||K.location.hash;if(v==null){return g(u)}if(u){var t=u.substring(1).split("&");for(var r=0;r<t.length;r++){if(t[r].substring(0,t[r].indexOf("="))==v){return g(t[r].substring((t[r].indexOf("=")+1)))}}}return""},expressInstallCallback:function(){if(A&&M){var q=C(m);if(q){q.parentNode.replaceChild(M,q);if(l){W(l,true);if(h.ie&&h.win){M.style.display="block"}}M=null;l=null;A=false}}}}}();
\ No newline at end of file
diff --git a/app/assets/javascripts/ytp.js b/app/assets/javascripts/ytp.js
new file mode 100644
index 00000000..4e8bfcb7
--- /dev/null
+++ b/app/assets/javascripts/ytp.js
@@ -0,0 +1,531 @@
+/*********************************** 
+  Accessible Controls for the YouTube Embedded Video Player
+  Copyright (c) 2010 Ken Petri, Web Accessibility Center, The Ohio State University
+  
+  ** Licensing **
+  This work is licensed under the Creative Commons Attribution-Share Alike 3.0 United States License,
+  which allows copying, distributing, and adapting this work for all purposes, including commercial
+  ones, so long as attribution is maintained and derivative works are similarly licensed.
+  Use is otherwise bound by U.S. Copyright law.
+  To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/3.0/us/
+  This code uses Google YouTube JavaScript Player APIs (http://code.google.com/apis/youtube/js_api_reference.html), 
+  which are bound by their Terms of Service: http://code.google.com/apis/youtube/terms.html
+  This code relies on SWFObject by Bobby van der Sluis (http://code.google.com/p/swfobject/), 
+  which maintains an MIT License: http://www.opensource.org/licenses/mit-license.php
+  
+  ** Compatibility **
+  This code is known to work with Firefox 3+, Opera 9+, Safari 3+, Chrome 2+, IE 6+.
+  It has been tested using only the keyboard in Windows and Mac 
+  and using the screen readers JAWS 10 (Windows, with Firefox and IE), NVDA (Windows, with Firefox) and VoiceOver (MacOS X.5, with Safari).
+************************************/
+// Utility functions
+function ytTrim(str)
+{
+  var tempstr = str.replace(new RegExp("^\\s+"), "");
+  return tempstr.replace(new RegExp("\\s+$"), "");
+}
+function ytStopDefaultAction(event)
+{
+  event.returnValue = false;
+  if (typeof event.preventDefault != "undefined") 
+  {
+    event.preventDefault();
+  }
+}
+// get the instances of the player div to populate
+function ytGetInstances()
+{
+  var elementArray = new Array();
+  var matchedArray = new Array();
+  if (document.all)
+  {
+    elementArray = document.all;
+  }
+  else
+  {
+    elementArray = document.getElementsByTagName("div");
+  }
+  for (var i=0; i<elementArray.length; i++ )
+  {
+    var pattern = new RegExp("ytplayerbox");
+    if (pattern.test(elementArray[i].className))
+    {
+      matchedArray[matchedArray.length] = elementArray[i];
+    }
+  }
+  return matchedArray;
+}
+// Generic, cross-browser load and event listeners from Edwards and Adams, "JavaScript Anthology"
+function ytAddLoadListener(fn){
+  if (typeof window.addEventListener != 'undefined') 
+  {
+    window.addEventListener('load', fn, false);
+  }
+  else 
+    if (typeof document.addEventListener != 'undefined') 
+    {
+      document.addEventListener('load', fn, false);
+    }
+    else 
+      if (typeof window.attachEvent != 'undefined') 
+      {
+        window.attachEvent('onload', fn);
+      }
+      else 
+      {
+        var oldfn = window.onload;
+        if (typeof window.onload != 'function') 
+        {
+          window.onload = fn;
+        }
+        else 
+        {
+          window.onload = function(){
+            oldfn();
+            fn();
+          };
+        }
+      }
+}
+function ytAttachEventListener(target, eventType, functionRef, capture)
+{
+  if (typeof target.addEventListener != "undefined") 
+  {
+    target.addEventListener(eventType, functionRef, capture);
+  }
+  else 
+    if (typeof target.attachEvent != "undefined") 
+    {
+      target.attachEvent("on" + eventType, functionRef);
+    }
+    else 
+    {
+      eventType = "on" + eventType;
+      if (typeof target[eventType] == "function") 
+      {
+        var oldListener = target[eventType];
+        target[eventType] = function(){
+          oldListener();
+          return functionRef();
+        };
+      }
+      else 
+      {
+        target[eventType] = functionRef;
+      }
+    }
+  return true;
+}
+// Rendering functions
+function ytPlayerBoxDraw(aspect,ytpbox,pid)
+{
+  var width = "480px";
+  if (aspect == "normal") 
+  {
+    width = "480px";
+  }
+  else if (aspect == "wide")
+  {
+    width = "640px";
+  }
+  if (ytpbox)
+  {
+    ytpbox.style.width = width;
+    ytpbox.innerHTML =  "<div id=\"ytapiplayer"+ pid +"\">" +
+                          "You need Flash player 8+ and JavaScript enabled to view this video." +
+                        "<\/div>" +
+    										"<h3 class=\"semantic\">Player Controls<\/h3>" +
+                       	"<ul class=\"ytplayerbuttons\">" +
+                         	"<li><a id=\"ytplaybut"+ pid +"\" href=\"/\">Play<\/a><\/li>" +
+                         	"<li><a id=\"ytforwardbut"+ pid +"\" href=\"/\">Forward 20%<\/a><\/li>" +
+                         	"<li><a id=\"ytbackbut"+ pid +"\" href=\"/\">Back 20%<\/a><\/li>" +
+                         	"<li><a id=\"ytstopbut"+ pid +"\" href=\"/\">Stop<\/a><\/li>" +
+                         	"<li><a id=\"ytvolupbut"+ pid +"\" href=\"/\">Volume Up<\/a><\/li>" +
+                         	"<li><a id=\"ytvoldownbut"+ pid +"\" href=\"/\">Volume Down<\/a><\/li>" +
+                         	"<li><a id=\"ytmutebut"+ pid +"\" href=\"/\">Mute<\/a><\/li>" +
+                          "<li><a id=\"ytloopbut"+ pid +"\" href=\"/\">Loop<\/a><\/li>" +
+                        "<\/ul>" +
+                        "<h4>Currently Playing: <span id=\"ytvidtitle"+ pid +"\"><\/span><\/h4>" +
+                        "<h4>Time: <span id=\"ytplayertime"+ pid +"\"><\/span><\/h4>";
+  }
+}
+function ytPlayerInit(list,aspect,ytp,pid)
+{
+  var width = "480";
+  if (aspect == "normal") 
+  {
+    width = "480";
+  }
+  else if (aspect = "wide")
+  {
+    width = "640";
+  }
+  var ytmovurl = list[0].url;
+  if (ytmovurl) 
+  {
+    var ytpl = document.getElementById("ytplaybut"+ pid);
+    ytAttachEventListener(ytpl, "click", function() {ytplay(pid)}, false);
+    ytAttachEventListener(ytpl, "click", ytStopDefaultAction, false);
+    var ytf = document.getElementById("ytforwardbut"+ pid);
+    ytAttachEventListener(ytf, "click", function() {ytforward(pid)}, false);
+    ytAttachEventListener(ytf, "click", ytStopDefaultAction, false);
+    var ytb = document.getElementById("ytbackbut"+ pid);
+    ytAttachEventListener(ytb, "click", function() {ytback(pid)}, false);
+    ytAttachEventListener(ytb, "click", ytStopDefaultAction, false);
+    var yts = document.getElementById("ytstopbut"+ pid);
+    ytAttachEventListener(yts, "click", function() {ytstop(pid)}, false);
+    ytAttachEventListener(yts, "click", ytStopDefaultAction, false);
+    var ytvu = document.getElementById("ytvolupbut"+ pid);
+    ytAttachEventListener(ytvu, "click", function() {ytvolup(pid)}, false);
+    ytAttachEventListener(ytvu, "click", ytStopDefaultAction, false);
+    var ytvd = document.getElementById("ytvoldownbut"+ pid);
+    ytAttachEventListener(ytvd, "click", function() {ytvoldown(pid)}, false);
+    ytAttachEventListener(ytvd, "click", ytStopDefaultAction, false);
+    var ytm = document.getElementById("ytmutebut"+ pid);
+    ytAttachEventListener(ytm, "click", function() {ytmute(pid)}, false);
+    ytAttachEventListener(ytm, "click", ytStopDefaultAction, false);
+    var ytl = document.getElementById("ytloopbut"+ pid);
+    ytAttachEventListener(ytl, "click", function() {ytloop(pid)}, false);
+    ytAttachEventListener(ytl, "click", ytStopDefaultAction, false);
+    ytPlayerLoad(ytmovurl, width, pid);
+    var titlenode = document.getElementById("ytvidtitle"+ pid);
+    var titleval = document.createTextNode("\""+ list[0].text +"\"");
+    titlenode.appendChild(titleval);
+  }
+  // only create a playlist if more than one video is specified
+  if (list.length > 1) 
+  {
+    var listH = document.createElement("h3");
+    listH.className = "playlisth";
+    var listHText = document.createTextNode("Video Play List");
+    listH.appendChild(listHText);
+    ytp.appendChild(listH);
+    var listUl = document.createElement("ul");
+    listUl.className = "ytplaylistl";
+    ytp.appendChild(listUl);
+    for (var i=0; i<list.length; i++)
+    {
+      var listLi = document.createElement("li");
+      if (i%2)
+      {
+        listLi.className = "ytlisteven";
+      }
+      else
+      {
+        listLi.className = "ytlistodd";
+      }
+      var listLink = document.createElement("a");
+      listLink.href = "/";
+      listLink.id = list[i].url;
+      var listLinkText = document.createTextNode(list[i].text);
+      listLink.appendChild(listLinkText);
+      listLi.appendChild(listLink);
+      listUl.appendChild(listLi);
+      /*  Have to use old style event attachment.
+          MS IE's event registration model uses attachEvent() method, which creates a reference to the 
+          function, instead of a copy (like other browsers addEventListener() method). */
+      listLink.onclick = function() {ytLoadNewVideo(pid, this.id, this.firstChild.nodeValue)};
+      ytAttachEventListener(listLink, "click", ytStopDefaultAction, false);
+    }
+  }
+}
+function ytPlayerDispatch(ytp,ytpid) 
+{
+  if (ytp) 
+  {
+    // get movie urls, titles, and other set up variables from page
+    var ytPlaylistArray = new Array();
+    var ytPlayerAspect = "normal";
+    var movpattern = /^ytmovieurl:.*$/;
+    var movmatch = /^ytmovieurl:(.*)$/;
+    var aspectpattern = /^ytplayeraspect:.*$/;
+    var aspectmatch = /^ytplayeraspect:(.*)$/;
+    for (var i=0; i<ytp.childNodes.length; i++)
+    {
+      if (ytp.childNodes[i].className) 
+      {
+        if (movpattern.test(ytp.childNodes[i].className)) 
+        {
+          var str = ytp.childNodes[i].className;
+          var yturl = ytTrim(str.replace(movmatch, "$1"));
+          var yttext = ytTrim(ytp.childNodes[i].firstChild.nodeValue);
+          var ytlistobj = {
+            url : yturl,
+            text : yttext
+          };
+          ytPlaylistArray.push(ytlistobj);
+        }
+        if (aspectpattern.test(ytp.childNodes[i].className)) 
+        {
+          var str = ytp.childNodes[i].className;
+          ytPlayerAspect = ytTrim(str.replace(aspectmatch, "$1"));
+        }
+      }
+    }
+    ytPlayerBoxDraw(ytPlayerAspect,ytp,ytpid);
+    ytPlayerInit(ytPlaylistArray,ytPlayerAspect,ytp,ytpid);
+    setInterval(function() { updateButtonState(ytpid); }, 250);
+    setInterval(function() { updateTime(ytpid); }, 500);
+  }
+}
+// on load, loop through player config instances, hand to dispatcher
+ytAddLoadListener(function() {
+  var inst = ytGetInstances();
+  for (var i=0; i<inst.length; i++)
+  {
+    ytPlayerDispatch(inst[i],i);
+  }
+});
+
+// YouTube API-specific code
+var ytplayer = new Array();
+function onYouTubePlayerReady(playerId)
+{
+  ytplayer.push(playerId);
+}
+function updateButtonState(ytpid)
+{
+  var ytp = document.getElementById("thisytp"+ytpid);
+  if (new RegExp('^(' + ytplayer.join('|') + ')$').test(ytp.id))
+  { 
+    var mutebut = document.getElementById("ytmutebut"+ ytpid);
+    var playbut = document.getElementById("ytplaybut"+ ytpid);
+    if (ytp.isMuted()) 
+    {
+      mutebut.firstChild.nodeValue = "Unmute";
+    }
+    else 
+    {
+      mutebut.firstChild.nodeValue = "Mute";
+    }
+    if (ytp.getPlayerState() == 1)
+    {
+      playbut.firstChild.nodeValue = "Pause"
+    }
+    if (ytp.getPlayerState() == 2)
+    {
+      playbut.firstChild.nodeValue = "Play"
+    }
+  }
+}
+function prepTime(s)
+{
+  var hours=Math.floor(s/3600);
+  var minutes=Math.floor(s/60)-(hours*60);
+  var seconds=s-(hours*3600)-(minutes*60);
+  if (minutes<10) minutes = "0"+minutes;
+  if (seconds<10) seconds = "0"+seconds;
+  hours = (hours<1) ? "" : hours + ":";
+  return hours + minutes +":"+ seconds;
+}
+function updateTime(ytpid)
+{
+  var ytp = document.getElementById("thisytp"+ytpid);
+  if (new RegExp('^(' + ytplayer.join('|') + ')$').test(ytp.id))
+  {
+    var timespan = document.getElementById("ytplayertime"+ ytpid);
+    var timeval = document.createTextNode(prepTime(Math.round(ytp.getCurrentTime())) +" of "+ prepTime(Math.round(ytp.getDuration())));
+    if (timespan.firstChild)
+    {
+      var temp = timespan.firstChild;
+      temp.parentNode.removeChild(temp);
+    }
+    timespan.appendChild(timeval);
+  }
+}
+var ytLoopInterval = new Array();
+function ytloop(ytpid)
+{
+  var ytp = document.getElementById("thisytp"+ytpid);
+  if (new RegExp('^(' + ytplayer.join('|') + ')$').test(ytp.id)) 
+  {
+  	var loopbut = document.getElementById("ytloopbut"+ytpid);
+   	if (loopbut.firstChild.nodeValue == "Loop")
+    {
+    	loopbut.firstChild.nodeValue = "UnLoop";
+      ytLoopInterval[ytpid] = window.setInterval(function() { ytp.playVideo(); }, 2000);
+    }
+    else
+    {
+    	loopbut.firstChild.nodeValue = "Loop";
+      clearInterval(ytLoopInterval[ytpid]);
+    }
+  }
+}
+function ytmute(ytpid)
+{
+  var ytp = document.getElementById("thisytp"+ytpid);
+  if (new RegExp('^(' + ytplayer.join('|') + ')$').test(ytp.id)) 
+  {
+    if (ytp.isMuted()) 
+    {
+      ytp.unMute();
+    }
+    else 
+    {
+      ytp.mute();
+    }
+  }
+}
+function ytvolup(ytpid)
+{
+  var ytp = document.getElementById("thisytp"+ytpid);
+  if (new RegExp('^(' + ytplayer.join('|') + ')$').test(ytp.id)) 
+  {
+    var vol = ytp.getVolume();
+    var nvol = "0";
+    if (vol >= 0) 
+    {
+      nvol = "20"
+    }
+    if (vol >= 20) 
+    {
+      nvol = "40"
+    }
+    if (vol >= 40) 
+    {
+      nvol = "60"
+    }
+    if (vol >= 60) 
+    {
+      nvol = "80"
+    }
+    if (vol >= 80) 
+    {
+      nvol = "100"
+    }
+    ytp.setVolume(nvol);
+  }
+}
+function ytvoldown(ytpid)
+{
+  var ytp = document.getElementById("thisytp"+ytpid);
+  if (new RegExp('^(' + ytplayer.join('|') + ')$').test(ytp.id)) 
+  {
+    var vol = ytp.getVolume();
+    var nvol = "100";
+    if (vol <= 100) 
+    {
+      nvol = "80"
+    }
+    if (vol <= 80) 
+    {
+      nvol = "60"
+    }
+    if (vol <= 60) 
+    {
+      nvol = "40"
+    }
+    if (vol <= 40) 
+    {
+      nvol = "20"
+    }
+    if (vol <= 20) 
+    {
+      nvol = "0"
+    }
+    ytp.setVolume(nvol);
+  }
+}
+function ytplay(ytpid)
+{
+  var ytp = document.getElementById("thisytp"+ytpid);
+  if (new RegExp('^(' + ytplayer.join('|') + ')$').test(ytp.id)) 
+  {
+    if (ytp.getPlayerState() == "1") {
+      ytp.pauseVideo();
+    }
+    else 
+    {
+      ytp.playVideo();
+    }
+  } 
+}
+function ytstop(ytpid)
+{
+  var ytp = document.getElementById("thisytp"+ytpid);
+  if (new RegExp('^(' + ytplayer.join('|') + ')$').test(ytp.id)) 
+  {
+    ytp.pauseVideo();
+    ytp.seekTo("0");
+  }
+}
+function ytforward(ytpid)
+{
+  var ytp = document.getElementById("thisytp"+ytpid);
+  if (new RegExp('^(' + ytplayer.join('|') + ')$').test(ytp.id)) 
+  {
+    var dur = ytp.getDuration();
+    if (dur > 0) 
+    {
+      var nt = Math.floor(dur * .2) + ytp.getCurrentTime();
+      if (nt < dur) 
+      {
+        ytp.seekTo(nt);
+      }
+      else {
+        ytp.seekTo(dur);
+      }
+    }
+  }
+}
+function ytback(ytpid)
+{
+  var ytp = document.getElementById("thisytp"+ytpid);
+  if (new RegExp('^(' + ytplayer.join('|') + ')$').test(ytp.id))
+  {
+    var dur = ytp.getDuration();
+    if (dur > 0) 
+    {
+      var nt = ytp.getCurrentTime() - Math.floor(dur * .2);
+      if (nt > 0) 
+      {
+        ytp.seekTo(nt);
+      }
+      else 
+      {
+        ytp.seekTo(0);
+      }
+    }
+  }
+}
+function ytLoadNewVideo(ytpid,url,titleval) 
+{
+  var ytp = document.getElementById("thisytp"+ytpid);
+  if (new RegExp('^(' + ytplayer.join('|') + ')$').test(ytp.id))
+  {
+    ytp.loadVideoById(url, 0);
+    var titlenode = document.getElementById("ytvidtitle"+ ytpid);
+    if (titlenode.firstChild)
+    {
+      var temp = titlenode.firstChild;
+      temp.parentNode.removeChild(temp);
+    }
+    var title = document.createTextNode(titleval);
+    titlenode.appendChild(title);
+  }
+}
+// Player embedding code. Uses SWFObject library.
+// Start with YouTube video default, non-letterbox width of 480x360 (letter is 640x360)
+// Add chrome on YouTube player: 24px high
+// cc_load_policy param turns captions on by default, since there is no JavaScript equiv. for doing that
+// "hd=1" attempts loading high def
+// "rel=0" turns off YT search and relative links
+// "fs=1" allows for full-screen button (no JavaScript equiv.)
+function ytPlayerLoad(ytmovurl,width,pid)
+{
+  var myytpid = "thisytp"+ pid;
+  var myytapiplayer = "ytapiplayer" + pid;
+  var ytparams = {
+    allowScriptAccess: "always",
+    allowFullScreen: "true",
+    cc_load_policy: "1",
+    hd: "1"
+  };
+  var ytatts = {
+    id: myytpid
+  };
+  swfobject.embedSWF("http://www.youtube.com/v/" +
+  ytmovurl +
+  "&enablejsapi=1&playerapiid="+ myytpid +"&hd=1&rel=0&fs=1", myytapiplayer, width, "384", "8", null, null, ytparams, ytatts);
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/ytp.css b/app/assets/stylesheets/ytp.css
new file mode 100644
index 00000000..2b7c34f4
--- /dev/null
+++ b/app/assets/stylesheets/ytp.css
@@ -0,0 +1,107 @@
+/* 
+  Sample CSS for "Accessible Controls for the YouTube Embedded Video Player"
+  http://wac.osu.edu/examples/youtube-player-controls/
+*/
+div.ytplayerbox 
+{
+  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+  font-size: x-small;
+  border: 1px solid #999;
+  background: #eee;
+  margin: 0;
+  padding: 5px;
+}
+ul.ytplayerbuttons 
+{
+  margin: 3px 0 0 0; padding: 5px 3px;
+  border: 1px solid #ccc;
+}
+ul.ytplayerbuttons li 
+{
+  list-style-type: none;
+  display:inline;
+  border: 1px solid #ccc;
+  margin: 0 1px 0 0;
+}
+ul.ytplayerbuttons a 
+{ 
+  padding: 3px;
+  text-decoration: none;
+  border: none;
+  display:inline-block; /* helps with IE7 and earlier rendering */
+}
+ul.ytplayerbuttons a:link, ul.ytplayerbuttons a:visited
+{
+  color: #fff;
+  background: #222;
+}
+ul.ytplayerbuttons a:hover, ul.ytplayerbuttons a:active, ul.ytplayerbuttons a:focus
+{
+  background: #555;
+}
+/* or use your own offleft hiding style declaration for this */
+div.ytplayerbox h3.semantic
+{
+  position:absolute;
+  left:-10000px;
+  top:auto;
+  width:1px;
+  height:1px;
+  overflow:hidden;
+}
+div.ytplayerbox h3.playlisth
+{
+  font-size: small;
+  color: #333;
+  line-height:0.8;
+  margin: 12px 0 3px 0;
+}
+div.ytplayerbox h4 
+{
+  font-size: small;
+  color: #555;
+  margin: 3px 0 0 0;
+}
+ul.ytplaylistl
+{
+  background: #999;
+  padding: 1px;
+  margin: 0;
+}
+ul.ytplaylistl li 
+{
+  list-style-type: none;
+  font-size: small;
+  background: transparent url("../img/control_play.png") no-repeat 3px .3em;
+  padding: 5px 0 3px 21px;
+  margin: 0;
+}
+ul.ytplaylistl li.ytlisteven
+{
+  background-color: #ebebeb;
+}
+ul.ytplaylistl li.ytlistodd
+{
+  background-color: #ddd;
+}
+ul.ytplaylistl li a
+{
+  font-weight: bold;
+  text-decoration: none;
+  border: none;
+  display: block;
+  margin: 0 3px 0 1px;
+}
+ul.ytplaylistl li a:link
+{
+  color: #000;
+}
+ul.ytplaylistl li a:visited
+{
+  color: #333;
+}
+ul.ytplaylistl li a:hover, ul.ytplaylistl li a:active, ul.ytplaylistl li a:focus
+{
+  color: #fff;
+  background-color: #333;
+}
diff --git a/app/views/contents/index.html.haml b/app/views/contents/index.html.haml
index 48b5b3f1..f28c0d12 100644
--- a/app/views/contents/index.html.haml
+++ b/app/views/contents/index.html.haml
@@ -5,7 +5,13 @@
         = @topic.title
       %section.topic
         .row
-          %iframe{:src => "#{@content.youtube_channel_url}"}
+          .ytplayerbox
+            / specify 'normal' for YouTube VGA aspect ratio (480 x 360) and 'wide' for YouTube HD (640 x 360)
+            %span.ytplayeraspect:.normal  
+            / list video titles and identifiers here, playlist rendered only if more than one movie
+            %span{class: "ytmovieurl:#{@content.youtube_channel_url.split('/').last}"}  
+              = @content.title
+
       .row
         .tabbable.tabs-left.topic-details.colored-block{:id => "tabpanel", :role => "application"}
           %ul.nav.nav-tabs{:role => "tablist"}