WP YouTube Lyte - Version 0.6.0

Version Description

There now is a WP-YouTube-Lyte widget which you can add to your sidebar (see under "Appearance"->"Widgets"), as requested by the fabulous fruityoaty
The thumbnail is now stretched to use as much of the player as possible (thanks to css3's background-size:contain directive, which works in all bleeding edge browsers)
Updated the "play"-button to fit the new YouTube style

Release Info

Developer	futtta
Plugin	WP YouTube Lyte
Version	0.6.0
Comparing to
See all releases

Code changes from version 0.5.3 to 0.6.0

Files changed (9) hide show

lyte/controls-150.png +0 -0
lyte/controls-newtube-150.png +0 -0
lyte/lyte-min.js +1 -1
lyte/lyte-newtube-min.js +1 -1
lyte/play.png +0 -0
options.php +1 -1
readme.txt +14 -2
widget.php +56 -0
wp-youtube-lyte.php +4 -3

lyte/controls-150.png ADDED Viewed

Binary file

lyte/controls-newtube-150.png ADDED Viewed

Binary file

lyte/lyte-min.js CHANGED Viewed

@@ -1 +1 @@

- var doc=document;var cI='lytecss';if(!doc.getElementById(cI)){var lk=doc.createElement('link');lk.id=cI;lk.rel='stylesheet';lk.type='text/css';lk.href=bU+'lyte.css';doc.getElementsByTagName('head')[0].appendChild(lk);}function lyte(){lytes=getElementsByClassName("lyte","div");for(var i=0;i<lytes.length;i++){lyte_id=lytes[i].id;p=doc.getElementById(lyte_id);p.className="~~lyte~~ lP";jsonUrl="http://gdata.youtube.com/feeds/api/videos/"+lyte_id+"?fields=id,title&alt=json-in-script&callback=parseMe";loadScript(jsonUrl);pl=doc.createElement('div');p.appendChild(pl);p.onclick=nolyte;setStyle(p,'width:'+pW+'px;height:'+pH+'px;');pl.id="lyte_"+lyte_id;pl.className="pL";setStyle(pl,'height:'+pH+'px;width:'+pW+'px;');pl.innerHTML="<img src=\""+bU+"play.png\" alt=\"Click to play this video\" style=\"margin-top:"+((pH/2)-30)+"px;opacity:0.8;\" onmouseover=\"this.style.opacity=1;\" onmouseout=\"this.style.opacity=0.8;\"/><img src=\""+bU+"controls-"+pW+".png\" width=\"100%\" alt=\"\" class=\"ctrl\" style=\"max-width:"+pW+"px;\"/>";~~if(pH>385){vA="center"~~}~~else{vA="top"~~}~~;pl.style.background="#000 url(http://img.youtube.com/vi/"+lyte_id+"/0.jpg) no-repeat center "+vA}}~~function nolyte(){this.onclick="";this.innerHTML="<embed src=\"http://www.youtube-nocookie.com/v/"+this.id+"&autoplay=1&rel=0&egm=0&fs=1\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" id=\"lyte_"+this.id+"\" wmode=\"transparent\" width=\""+pW+"\" height=\""+pH+"\" allowscriptaccess=\"always\"></embed>"}function parseMe(r){title=r.entry.title.$t;idu=r.entry.id.$t;p=doc.getElementById("lyte_"+idu.substring((idu.length-11)));c=doc.createElement('div');c.className="tC";p.appendChild(c);setStyle(c,"margin:-"+((pH/2)+15)+"px 5px;");t=doc.createElement('div');t.className="tT";c.appendChild(t);t.innerHTML=title;}function setStyle(e,s){if(typeof e.setAttribute==="function")e.setAttribute('style',s);else if(typeof e.style.setAttribute==="object")e.style.setAttribute('cssText',s)}function loadScript(url){scr=doc.createElement('script');scr.src=url;scr.type='text/javascript';doc.getElementsByTagName('head')[0].appendChild(scr)}var getElementsByClassName=function(className,tag,elm){if(doc.getElementsByClassName){getElementsByClassName=function(className,tag,elm){elm=elm||doc;var elements=elm.getElementsByClassName(className),nodeName=(tag)?new RegExp("\\b"+tag+"\\b","i"):null,returnElements=[],current;for(var i=0,il=elements.length;i<il;i+=1){current=elements[i];if(!nodeName||nodeName.test(current.nodeName)){returnElements.push(current)}}return returnElements}}else if(doc.evaluate){getElementsByClassName=function(className,tag,elm){tag=tag||"*";elm=elm||doc;var classes=className.split(" "),classesToCheck="",xhtmlNamespace="http://www.w3.org/1999/xhtml",namespaceResolver=(doc.documentElement.namespaceURI===xhtmlNamespace)?xhtmlNamespace:null,returnElements=[],elements,node;for(var j=0,jl=classes.length;j<jl;j+=1){classesToCheck+="[contains(concat(' ', @class, ' '), ' "+classes[j]+" ')]"}try{elements=doc.evaluate(".//"+tag+classesToCheck,elm,namespaceResolver,0,null)}catch(e){elements=doc.evaluate(".//"+tag+classesToCheck,elm,null,0,null)}while((node=elements.iterateNext())){returnElements.push(node)}return returnElements}}else{getElementsByClassName=function(className,tag,elm){tag=tag||"*";elm=elm||doc;var classes=className.split(" "),classesToCheck=[],elements=(tag==="*"&&elm.all)?elm.all:elm.getElementsByTagName(tag),current,returnElements=[],match;for(var k=0,kl=classes.length;k<kl;k+=1){classesToCheck.push(new RegExp("(^|\\s)"+classes[k]+"(\\s|$)"))}for(var l=0,ll=elements.length;l<ll;l+=1){current=elements[l];match=false;for(var m=0,ml=classesToCheck.length;m<ml;m+=1){match=classesToCheck[m].test(current.className);if(!match){break}}if(match){returnElements.push(current)}}return returnElements}}return getElementsByClassName(className,tag,elm)};lyte();

+ var doc=document;var cI='lytecss';if(!doc.getElementById(cI)){var lk=doc.createElement('link');lk.id=cI;lk.rel='stylesheet';lk.type='text/css';lk.href=bU+'lyte.css';doc.getElementsByTagName('head')[0].appendChild(lk);}function lyte(){lytes=getElementsByClassName("lyte","div");for(var i=0;i<lytes.length;i++){lyte_id=lytes[i].id;p=doc.getElementById(lyte_id);p.className+=" lP";if(p.className.indexOf('widget')!=-1){pW=150;pH=125}else{jsonUrl="http://gdata.youtube.com/feeds/api/videos/"+lyte_id+"?fields=id,title&alt=json-in-script&callback=parseMe";loadScript(jsonUrl)}pl=doc.createElement('div');p.appendChild(pl);p.onclick=nolyte;setStyle(p,'width:'+pW+'px;height:'+pH+'px;');pl.id="lyte_"+lyte_id;pl.className="pL";setStyle(pl,'height:'+pH+'px;width:'+pW+'px;background:url("http://img.youtube.com/vi/'+lyte_id+'/0.jpg") no-repeat scroll center center rgb(0, 0, 0);background-size:contain;');pl.innerHTML="<img src=\""+bU+"play.png\" alt=\"Click to play this video\" style=\"margin-top:"+((pH/2)-30)+"px;opacity:0.7;\" onmouseover=\"this.style.opacity=1;\" onmouseout=\"this.style.opacity=0.8;\"/><img src=\""+bU+"controls-"+pW+".png\" width=\"100%\" alt=\"\" class=\"ctrl\" style=\"max-width:"+pW+"px;\"/>";}}function nolyte(){this.onclick="";this.innerHTML="<embed src=\"http://www.youtube-nocookie.com/v/"+this.id+"&autoplay=1&rel=0&egm=0&fs=1&iv_load_policy=3\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" id=\"lyte_"+this.id+"\" wmode=\"transparent\" width=\""+this.clientWidth+"\" height=\""+this.clientHeight+"\" allowscriptaccess=\"always\"></embed>"}function parseMe(r){title=r.entry.title.$t;idu=r.entry.id.$t;p=doc.getElementById("lyte_"+idu.substring((idu.length-11)));c=doc.createElement('div');c.className="tC";p.appendChild(c);setStyle(c,"margin:-"+((p.clientHeight/2)+15)+"px 5px;");t=doc.createElement('div');t.className="tT";c.appendChild(t);t.innerHTML=title;}function setStyle(e,s){if(typeof e.setAttribute==="function")e.setAttribute('style',s);else if(typeof e.style.setAttribute==="object")e.style.setAttribute('cssText',s)}function loadScript(url){scr=doc.createElement('script');scr.src=url;scr.type='text/javascript';doc.getElementsByTagName('head')[0].appendChild(scr)}var getElementsByClassName=function(className,tag,elm){if(doc.getElementsByClassName){getElementsByClassName=function(className,tag,elm){elm=elm||doc;var elements=elm.getElementsByClassName(className),nodeName=(tag)?new RegExp("\\b"+tag+"\\b","i"):null,returnElements=[],current;for(var i=0,il=elements.length;i<il;i+=1){current=elements[i];if(!nodeName||nodeName.test(current.nodeName)){returnElements.push(current)}}return returnElements}}else if(doc.evaluate){getElementsByClassName=function(className,tag,elm){tag=tag||"*";elm=elm||doc;var classes=className.split(" "),classesToCheck="",xhtmlNamespace="http://www.w3.org/1999/xhtml",namespaceResolver=(doc.documentElement.namespaceURI===xhtmlNamespace)?xhtmlNamespace:null,returnElements=[],elements,node;for(var j=0,jl=classes.length;j<jl;j+=1){classesToCheck+="[contains(concat(' ', @class, ' '), ' "+classes[j]+" ')]"}try{elements=doc.evaluate(".//"+tag+classesToCheck,elm,namespaceResolver,0,null)}catch(e){elements=doc.evaluate(".//"+tag+classesToCheck,elm,null,0,null)}while((node=elements.iterateNext())){returnElements.push(node)}return returnElements}}else{getElementsByClassName=function(className,tag,elm){tag=tag||"*";elm=elm||doc;var classes=className.split(" "),classesToCheck=[],elements=(tag==="*"&&elm.all)?elm.all:elm.getElementsByTagName(tag),current,returnElements=[],match;for(var k=0,kl=classes.length;k<kl;k+=1){classesToCheck.push(new RegExp("(^|\\s)"+classes[k]+"(\\s|$)"))}for(var l=0,ll=elements.length;l<ll;l+=1){current=elements[l];match=false;for(var m=0,ml=classesToCheck.length;m<ml;m+=1){match=classesToCheck[m].test(current.className);if(!match){break}}if(match){returnElements.push(current)}}return returnElements}}return getElementsByClassName(className,tag,elm)};lyte();

lyte/lyte-newtube-min.js CHANGED Viewed

@@ -1 +1 @@

- var doc=document;var cI='lytecss';if(!doc.getElementById(cI)){lk=doc.createElement('link');lk.id=cI;lk.rel='stylesheet';lk.type='text/css';lk.href=bU+'lyte.css';doc.getElementsByTagName('head')[0].appendChild(lk);}function lyte(){lytes=getElementsByClassName("lyte","div");for(var i=0;i<lytes.length;i++){lyte_id=lytes[i].id;p=doc.getElementById(lyte_id);p.className="~~lyte~~ lP";jsonUrl="http://gdata.youtube.com/feeds/api/videos/"+lyte_id+"?fields=id,title&alt=json-in-script&callback=parseMe";loadScript(jsonUrl);pl=doc.createElement('div');p.appendChild(pl);p.onclick=nolyte;setStyle(p,'width:'+pW+'px;height:'+pH+'px;');pl.id="lyte_"+lyte_id;pl.className="pL";setStyle(pl,'height:'+pH+'px;width:'+pW+'px;');pl.innerHTML="<img src=\""+bU+"play.png\" alt=\"Click to play this video\" style=\"margin-top:"+((pH/2)-30)+"px;opacity:0.8;\" onmouseover=\"this.style.opacity=1;\" onmouseout=\"this.style.opacity=0.8;\"/><img src=\""+bU+"controls-newtube-"+pW+".png\" width=\"100%\" class=\"ctrl\" alt=\"\" style=\"max-width:"+pW+"px;\"/>";~~if(pH>385){vA="center"~~}~~else{vA="top"~~}~~;pl.style.background="#000 url(http://img.youtube.com/vi/"+lyte_id+"/0.jpg) no-repeat center "+vA}}~~function nolyte(){this.onclick="";this.innerHTML="<iframe class=\"youtube-player\" type=\"text/html\" width=\""+pW+"\" height=\""+pH+"\" src=\"http://www.youtube.com/embed/"+this.id+"?autoplay=1\" frameborder=\"0\"></iframe>"}function parseMe(r){title=r.entry.title.$t;idu=r.entry.id.$t;p=doc.getElementById("lyte_"+idu.substring((idu.length-11)));c=doc.createElement('div');c.className="tC";p.appendChild(c);setStyle(c,"margin:-"+((pH/2)+15)+"px 5px;");t=doc.createElement('div');t.className="tT";c.appendChild(t);t.innerHTML=title;}function setStyle(e,s){if(typeof e.setAttribute==="function")e.setAttribute('style',s);else if(typeof e.style.setAttribute==="object")e.style.setAttribute('cssText',s)}function loadScript(url){scr=doc.createElement('script');scr.src=url;scr.type='text/javascript';doc.getElementsByTagName('head')[0].appendChild(scr)}var getElementsByClassName=function(className,tag,elm){if(doc.getElementsByClassName){getElementsByClassName=function(className,tag,elm){elm=elm||doc;var elements=elm.getElementsByClassName(className),nodeName=(tag)?new RegExp("\\b"+tag+"\\b","i"):null,returnElements=[],current;for(var i=0,il=elements.length;i<il;i+=1){current=elements[i];if(!nodeName||nodeName.test(current.nodeName)){returnElements.push(current)}}return returnElements}}else if(doc.evaluate){getElementsByClassName=function(className,tag,elm){tag=tag||"*";elm=elm||doc;var classes=className.split(" "),classesToCheck="",xhtmlNamespace="http://www.w3.org/1999/xhtml",namespaceResolver=(doc.documentElement.namespaceURI===xhtmlNamespace)?xhtmlNamespace:null,returnElements=[],elements,node;for(var j=0,jl=classes.length;j<jl;j+=1){classesToCheck+="[contains(concat(' ', @class, ' '), ' "+classes[j]+" ')]"}try{elements=doc.evaluate(".//"+tag+classesToCheck,elm,namespaceResolver,0,null)}catch(e){elements=doc.evaluate(".//"+tag+classesToCheck,elm,null,0,null)}while((node=elements.iterateNext())){returnElements.push(node)}return returnElements}}else{getElementsByClassName=function(className,tag,elm){tag=tag||"*";elm=elm||doc;var classes=className.split(" "),classesToCheck=[],elements=(tag==="*"&&elm.all)?elm.all:elm.getElementsByTagName(tag),current,returnElements=[],match;for(var k=0,kl=classes.length;k<kl;k+=1){classesToCheck.push(new RegExp("(^|\\s)"+classes[k]+"(\\s|$)"))}for(var l=0,ll=elements.length;l<ll;l+=1){current=elements[l];match=false;for(var m=0,ml=classesToCheck.length;m<ml;m+=1){match=classesToCheck[m].test(current.className);if(!match){break}}if(match){returnElements.push(current)}}return returnElements}} return getElementsByClassName(className,tag,elm)};lyte();

+ var doc=document;var cI='lytecss';if(!doc.getElementById(cI)){lk=doc.createElement('link');lk.id=cI;lk.rel='stylesheet';lk.type='text/css';lk.href=bU+'lyte.css';doc.getElementsByTagName('head')[0].appendChild(lk);}function lyte(){lytes=getElementsByClassName("lyte","div");for(var i=0;i<lytes.length;i++){lyte_id=lytes[i].id;p=doc.getElementById(lyte_id);p.className+=" lP";if(p.className.indexOf('widget')!=-1){pW=150;pH=125;}else{jsonUrl="http://gdata.youtube.com/feeds/api/videos/"+lyte_id+"?fields=id,title&alt=json-in-script&callback=parseMe";loadScript(jsonUrl)}pl=doc.createElement('div');p.appendChild(pl);p.onclick=nolyte;setStyle(p,'width:'+pW+'px;height:'+pH+'px;');pl.id="lyte_"+lyte_id;pl.className="pL";setStyle(pl,'height:'+pH+'px;width:'+pW+'px;background:url("http://img.youtube.com/vi/'+lyte_id+'/0.jpg") no-repeat scroll center center rgb(0, 0, 0);background-size:contain;');pl.innerHTML="<img src=\""+bU+"play.png\" alt=\"Click to play this video\" style=\"margin-top:"+((pH/2)-30)+"px;opacity:0.7;\" onmouseover=\"this.style.opacity=1;\" onmouseout=\"this.style.opacity=0.8;\"/><img src=\""+bU+"controls-newtube-"+pW+".png\" width=\"100%\" class=\"ctrl\" alt=\"\" style=\"max-width:"+pW+"px;\"/>";}}function nolyte(){this.onclick="";this.innerHTML="<iframe class=\"youtube-player\" type=\"text/html\" width=\""+this.clientWidth+"\" height=\""+this.clientHeight+"\" src=\"http://www.youtube.com/embed/"+this.id+"?autoplay=1&rel=0&egm=0&iv_load_policy=3\" frameborder=\"0\"></iframe>"}function parseMe(r){title=r.entry.title.$t;idu=r.entry.id.$t;p=doc.getElementById("lyte_"+idu.substring((idu.length-11)));c=doc.createElement('div');c.className="tC";p.appendChild(c);setStyle(c,"margin:-"+((p.clientHeight/2)+15)+"px 5px;");t=doc.createElement('div');t.className="tT";c.appendChild(t);t.innerHTML=title;}function setStyle(e,s){if(typeof e.setAttribute==="function")e.setAttribute('style',s);else if(typeof e.style.setAttribute==="object")e.style.setAttribute('cssText',s)}function loadScript(url){scr=doc.createElement('script');scr.src=url;scr.type='text/javascript';doc.getElementsByTagName('head')[0].appendChild(scr)}var getElementsByClassName=function(className,tag,elm){if(doc.getElementsByClassName){getElementsByClassName=function(className,tag,elm){elm=elm||doc;var elements=elm.getElementsByClassName(className),nodeName=(tag)?new RegExp("\\b"+tag+"\\b","i"):null,returnElements=[],current;for(var i=0,il=elements.length;i<il;i+=1){current=elements[i];if(!nodeName||nodeName.test(current.nodeName)){returnElements.push(current)}}return returnElements}}else if(doc.evaluate){getElementsByClassName=function(className,tag,elm){tag=tag||"*";elm=elm||doc;var classes=className.split(" "),classesToCheck="",xhtmlNamespace="http://www.w3.org/1999/xhtml",namespaceResolver=(doc.documentElement.namespaceURI===xhtmlNamespace)?xhtmlNamespace:null,returnElements=[],elements,node;for(var j=0,jl=classes.length;j<jl;j+=1){classesToCheck+="[contains(concat(' ', @class, ' '), ' "+classes[j]+" ')]"}try{elements=doc.evaluate(".//"+tag+classesToCheck,elm,namespaceResolver,0,null)}catch(e){elements=doc.evaluate(".//"+tag+classesToCheck,elm,null,0,null)}while((node=elements.iterateNext())){returnElements.push(node)}return returnElements}}else{getElementsByClassName=function(className,tag,elm){tag=tag||"*";elm=elm||doc;var classes=className.split(" "),classesToCheck=[],elements=(tag==="*"&&elm.all)?elm.all:elm.getElementsByTagName(tag),current,returnElements=[],match;for(var k=0,kl=classes.length;k<kl;k+=1){classesToCheck.push(new RegExp("(^|\\s)"+classes[k]+"(\\s|$)"))}for(var l=0,ll=elements.length;l<ll;l+=1){current=elements[l];match=false;for(var m=0,ml=classesToCheck.length;m<ml;m+=1){match=classesToCheck[m].test(current.className);if(!match){break}}if(match){returnElements.push(current)}}return returnElements}} return getElementsByClassName(className,tag,elm)};lyte();

lyte/play.png CHANGED Viewed

Binary file

options.php CHANGED Viewed

	@@ -16,7 +16,7 @@ function lyte_settings_page() {
16	?>
17	<div class="wrap">
18	<h2>WP YouTube Lyte Settings</h2>
19	- <p>WP-YouTube-Lyte inserts "Lite YouTube Embeds" in your blog. These look and feel like normal embedded YouTube, but don't use Flash unless clicked on, thereby <a href="http://blog.futtta.be/2010/04/23/~~high~~-~~performance~~-youtube-~~embeds~~/" target="_blank">reducing download size & rendering time substantially</a>. The HTML5-option even allows for entirely Flash-less YouTube embeds, using H264 or WebM to play the video in compatible browsers. You can find more info on the <a href="http://wordpress.org/extend/plugins/wp-youtube-lyte/" target="_blank">wordpress.org WP-YouTube-Lyte page</a>.</p>
20	<p>You can place video in your posts and pages by adding one or more http<strong>v</strong> YouTube-links to your post. These will automatically be replaced by WP-YouTube-Lyte with the correct (flash-less) code. Just replace the "http://" in the link with "httpv://", like this:
21	<blockquote>http<strong>v</strong>://www.youtube.com/watch?v=QQPSMRQnNlU</blockquote></p>
22	<p>You can modify WP-YouTube-Lyte's behaviour by changing the following settings:</p>


16	?>
17	<div class="wrap">
18	<h2>WP YouTube Lyte Settings</h2>
19	+ <p>WP-YouTube-Lyte inserts "Lite YouTube Embeds" in your blog. These look and feel like normal embedded YouTube, but don't use Flash unless clicked on, thereby <a href="http://blog.futtta.be/2010/08/30/the-state-of-wp-youtube-lyte/" target="_blank">reducing download size & rendering time substantially</a>. The HTML5-option even allows for entirely Flash-less YouTube embeds, using H264 or WebM to play the video in compatible browsers. You can find more info on the <a href="http://wordpress.org/extend/plugins/wp-youtube-lyte/" target="_blank">wordpress.org WP-YouTube-Lyte page</a>.</p>
20	<p>You can place video in your posts and pages by adding one or more http<strong>v</strong> YouTube-links to your post. These will automatically be replaced by WP-YouTube-Lyte with the correct (flash-less) code. Just replace the "http://" in the link with "httpv://", like this:
21	<blockquote>http<strong>v</strong>://www.youtube.com/watch?v=QQPSMRQnNlU</blockquote></p>
22	<p>You can modify WP-YouTube-Lyte's behaviour by changing the following settings:</p>

readme.txt CHANGED Viewed

	@@ -3,7 +3,7 @@ Contributors: futtta
3	Tags: youtube, video, lyte, lite youtube embeds, html5 video, html5
4	Requires at least: 2.9
5	Tested up to: 3.0.1
6	- Stable tag: 0.5.3
7
8	"Lite YouTube Embeds" look like normal YouTube embeds but don't use Flash, thus reducing download size & page rendering time.
9
	@@ -17,6 +17,8 @@ Experimental support for embedding html5 YouTube video is available (implementin
17
18	WP-Youtube-lyte can be used together with [Smart Youtube](http://wordpress.org/extend/plugins/smart-youtube/ "Great plugin"). In that case WP-Youtube-lyte will take care of the default embeds (httpv), while Smart Youtube continues to parse other types (httpvh, httpvhd, httpvp, ...).
19


20	== Installation ==
21
22	Just install form your Wordpress "Plugins\|Add New" screen and all will be well. Manual installation is very straightforward as well:
	@@ -35,12 +37,22 @@ HTML5 video will not be visible for everyone (see requirements), some visitors w
35
36	= Any bugs/ issues should I know about? =
37	* The new YouTube HTML5-embed-code is a work in progress, positioning of video isn't always perfect when fallback Flash-version is used.
38	- * ~~The~~ YouTube-~~thumbnail~~ doesn't ~~fit~~ in ~~the~~ ~~smaller~~-~~sized~~ player, ~~which~~ ~~will~~ ~~typically~~ be ~~visible~~ ~~when~~ ~~playing~~ ~~16:9~~ ~~videos (~~as ~~YouTube~~ ~~adds~~ ~~black~~ ~~border~~ on ~~top~~ ~~and bottom)~~
39
40	= I found a bug/ I would like a feature to be added! =
41	* Just tell me, I like the feedback! Use the [Contact-page on my blog](http://blog.futtta.be/contact/), [leave a comment in a post about wp-youtube-lyte](http://blog.futtta.be/tag/wp-youtube-lyte/) or [create a new topic on the wordpress.org forum](http://wordpress.org/tags/wp-youtube-lyte?forum_id=10#postform).
42





43	== Changelog ==





44	= 0.5.3 =
45	* we now wait for the DOM to be fully loaded (except for MS IE, where we have to wait for window.load) before kicking in, which means wp-youtube-lyte now functions correctly in Opera
46	* fixed a bug where lyte's javascript would overwrite the main div's class-name (causing css-issues in some themes)


3	Tags: youtube, video, lyte, lite youtube embeds, html5 video, html5
4	Requires at least: 2.9
5	Tested up to: 3.0.1
6	+ Stable tag: 0.6.0
7
8	"Lite YouTube Embeds" look like normal YouTube embeds but don't use Flash, thus reducing download size & page rendering time.
9

17
18	WP-Youtube-lyte can be used together with [Smart Youtube](http://wordpress.org/extend/plugins/smart-youtube/ "Great plugin"). In that case WP-Youtube-lyte will take care of the default embeds (httpv), while Smart Youtube continues to parse other types (httpvh, httpvhd, httpvp, ...).
19
20	+ Feedback is welcome; see [info in the faq](http://wordpress.org/extend/plugins/wp-youtube-lyte/faq/) for bug reports/ feature requests and feel free to [rate and/or report on compatibility on wordpress.org](http://wordpress.org/extend/plugins/wp-youtube-lyte/).
21	+
22	== Installation ==
23
24	Just install form your Wordpress "Plugins\|Add New" screen and all will be well. Manual installation is very straightforward as well:

37
38	= Any bugs/ issues should I know about? =
39	* The new YouTube HTML5-embed-code is a work in progress, positioning of video isn't always perfect when fallback Flash-version is used.
40	+ * If you're using the HTML5-version and you have a WP-YouTube-Lyte widget in your sidebar, you'll notice how the controls at the bottom overlap. This is because YouTube's new embed code doesn't scale down to small sizes too great. The normal (Flash-based) player omits most controls in this case, I would expect the HTML5-version to do this as well in a not to distant future.
41
42	= I found a bug/ I would like a feature to be added! =
43	* Just tell me, I like the feedback! Use the [Contact-page on my blog](http://blog.futtta.be/contact/), [leave a comment in a post about wp-youtube-lyte](http://blog.futtta.be/tag/wp-youtube-lyte/) or [create a new topic on the wordpress.org forum](http://wordpress.org/tags/wp-youtube-lyte?forum_id=10#postform).
44
45	+ = How you can help =
46	+ * Tell me about bugs you think you've found and if you can't find any, [confirm it works with your version of WP on wordpress.org](http://wordpress.org/extend/plugins/wp-youtube-lyte/)
47	+ * Ask me for a feature you would like to see added
48	+ * [Rate my plugin on wordpress.org](http://wordpress.org/extend/plugins/wp-youtube-lyte/), even if you think it stinks ;-)
49	+
50	== Changelog ==
51	+ = 0.6.0 =
52	+ * There now is a WP-YouTube-Lyte widget which you can add to your sidebar (see under "Appearance"->"Widgets"), as requested by the fabulous [fruityoaty](http://fruityoaty.com/)
53	+ * The thumbnail is now stretched to use as much of the player as possible (thanks to css3's background-size:contain directive, which works in [all bleeding edge browsers](http://www.quirksmode.org/css/background.html#t012))
54	+ * Updated the "play"-button to fit the new YouTube style
55	+
56	= 0.5.3 =
57	* we now wait for the DOM to be fully loaded (except for MS IE, where we have to wait for window.load) before kicking in, which means wp-youtube-lyte now functions correctly in Opera
58	* fixed a bug where lyte's javascript would overwrite the main div's class-name (causing css-issues in some themes)

widget.php ADDED Viewed

	@@ -0,0 +1,56 @@


1	+ <?php
2	+ class WYLWidget extends WP_Widget {
3	+ function WYLWidget() {
4	+ parent::WP_Widget(false, $name = 'WP-YouTube-Lyte');
5	+ }
6	+
7	+ function widget($args, $instance) {
8	+ extract( $args );
9	+ $WYLtitle = apply_filters('widget_title', $instance['WYLtitle']);
10	+ $WYLtext = apply_filters( 'widget_text', $instance['WYLtext'], $instance );
11	+ parse_str(parse_url(esc_url($instance['WYLurl']),PHP_URL_QUERY),$WYLarr);
12	+ $WYLid=$WYLarr['v'];
13	+
14	+ $wp_lyte_plugin_url = defined('WP_PLUGIN_URL') ? trailingslashit(WP_PLUGIN_URL . '/' . dirname(plugin_basename(__FILE__))) : trailingslashit(get_bloginfo('wpurl')) . PLUGINDIR . '/' . dirname(plugin_basename(__FILE__));
15	+ $lyteSettings[0]=$wp_lyte_plugin_url."lyte/";
16	+
17	+ if (get_option('newTube')==="1") {
18	+ $lyteSettings[1]="lyte-newtube-min.js";
19	+ } else {
20	+ $lyteSettings[1]="lyte-min.js";
21	+ }
22	+ ?>
23	+ <?php echo $before_widget; ?>
24	+ <?php if ( $WYLtitle ) echo $before_title . $WYLtitle . $after_title; ?>
25	+ <div class="lyte widget" id="<?php echo $WYLid; ?>" style="width:150px;height:125px;"><noscript><a href="http://youtu.be/<?php echo $WYLid;?>"><img src="http://img.youtube.com/vi/<?php echo $WYLid; ?>/default.jpg"></a></noscript><script type="text/javascript">/<![CDATA[/var bU='<?php echo $lyteSettings[0];?>';var d=document;if(d.addEventListener){d.addEventListener('DOMContentLoaded', insert, false)}else{window.onload=insert} function insert(){if(!d.getElementById('lytescr')){lytescr=d.createElement('script');lytescr.async=true;lytescr.id='lytescr';lytescr.src='<?php echo $lyteSettings[0].$lyteSettings[1];?>';h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(lytescr, h)}};/]]>/</script></div>
26	+ <div><?php echo $WYLtext ?></div>
27	+ <?php echo $after_widget; ?>
28	+ <?php
29	+ }
30	+
31	+ function update($new_instance, $old_instance) {
32	+ $instance = $old_instance;
33	+ $instance['WYLtitle'] = strip_tags($new_instance['WYLtitle']);
34	+ $instance['WYLurl'] = strip_tags($new_instance['WYLurl']);
35	+ if ( current_user_can('unfiltered_html') )
36	+ $instance['WYLtext'] = $new_instance['WYLtext'];
37	+ else
38	+ $instance['WYLtext'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['WYLtext']) ) );
39	+
40	+ return $instance;
41	+ }
42	+
43	+ function form($instance) {
44	+ $WYLtitle = esc_attr($instance['WYLtitle']);
45	+ $WYLurl = esc_attr($instance['WYLurl']);
46	+ $WYLtext = format_to_edit($instance['WYLtext']);
47	+ ?>
48	+ <p><label for="<?php echo $this->get_field_id('WYLtitle'); ?>"><?php _e('Title:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('WYLtitle'); ?>" name="<?php echo $this->get_field_name('WYLtitle'); ?>" type="text" value="<?php echo $WYLtitle; ?>" /></label></p>
49	+ <p><label for="<?php echo $this->get_field_id('WYLurl'); ?>"><?php _e('Youtube-URL:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('WYLurl'); ?>" name="<?php echo $this->get_field_name('WYLurl'); ?>" type="text" value="<?php echo $WYLurl; ?>" /></label></p>
50	+ <p><label for="<?php echo $this->get_field_id('WYLtext'); ?>"><?php _e('Text:'); ?> <textarea class="widefat" id="<?php echo $this->get_field_id('WYLtext'); ?>" name="<?php echo $this->get_field_name('WYLtext'); ?>" rows="16" cols="20"><?php echo $WYLtext; ?></textarea></label></p>
51	+ <?php
52	+ }
53	+ }
54	+
55	+ add_action('widgets_init', create_function('', 'return register_widget("WYLWidget");'));
56	+ ?>

wp-youtube-lyte.php CHANGED Viewed

	@@ -4,11 +4,13 @@ Plugin Name: WP YouTube Lyte
4	Plugin URI: http://blog.futtta.be/tag/lyte
5	Description: WordPress Lite YouTube Embeds (with optional HTML5 video) in posts.
6	Author: Frank (futtta) Goossens
7	- Version: 0.5.3
8	Author URI: http://blog.futtta.be/
9	*/
10
11	require(dirname(__FILE__).'/options.php');


12
13	$wp_lyte_plugin_url = defined('WP_PLUGIN_URL') ? trailingslashit(WP_PLUGIN_URL . '/' . dirname(plugin_basename(__FILE__))) : trailingslashit(get_bloginfo('wpurl')) . PLUGINDIR . '/' . dirname(plugin_basename(__FILE__));
14
	@@ -20,7 +22,6 @@ if (get_option('newTube')==="1") {
20	$lyteSettings[1]="lyte-min.js";
21	}
22
23	- include 'player_sizes.inc.php';
24	$oSize = (int) get_option('size');
25	if ((is_bool($oSize)) \|\| ($pSize[$oSize]['a']===false)) { $sel = (int) $pDefault; } else { $sel= $oSize; }
26	$lyteSettings[2]=$pSize[$sel]['w'];
	@@ -50,7 +51,7 @@ function lyte_parse($the_content) {
50	$noscript_post="";
51	$lytelinks_txt="<div class=\"lL\">Watch this video <a href=\"http://youtu.be/".$match[3]."\">on YouTube</a>.</div>";
52	}
53	- $lytetemplate = "<div class=\"lyte\" id=\"".$match[3]."\" style=\"width:".$lyteSettings[2]."px;height:".$lyteSettings[3]."px;\"><noscript><a href=\"http://youtu.be/".$match[3]."\"><img src=\"http://img.youtube.com/vi/".$match[3]."/~~default~~.jpg\">".$noscript_post."</a></noscript><script type=\"text/javascript\">/<![CDATA[/var bU='".$lyteSettings[0]."';pW='".$lyteSettings[2]."';pH='".$lyteSettings[3]."';var d=document;if(d.addEventListener){d.addEventListener('DOMContentLoaded', insert, false)}else{window.onload=insert} function insert(){if(!d.getElementById('lytescr')){lytescr=d.createElement('script');lytescr.async=true;lytescr.id='lytescr';lytescr.src='".$lyteSettings[0].$lyteSettings[1]."';h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(lytescr, h)}};/]]>/</script></div>".$lytelinks_txt;
54	$the_content = preg_replace("/httpv:\/\/([a-zA-Z0-9\-\_]+\.\|)youtube\.com\/watch(\?v\=\|\/v\/)([a-zA-Z0-9\-\_]{11})([^\s<]*)/", $lytetemplate, $the_content, 1);
55	}
56	}


4	Plugin URI: http://blog.futtta.be/tag/lyte
5	Description: WordPress Lite YouTube Embeds (with optional HTML5 video) in posts.
6	Author: Frank (futtta) Goossens
7	+ Version: 0.6.0
8	Author URI: http://blog.futtta.be/
9	*/
10
11	require(dirname(__FILE__).'/options.php');
12	+ require(dirname(__FILE__).'/player_sizes.inc.php');
13	+ require(dirname(__FILE__).'/widget.php');
14
15	$wp_lyte_plugin_url = defined('WP_PLUGIN_URL') ? trailingslashit(WP_PLUGIN_URL . '/' . dirname(plugin_basename(__FILE__))) : trailingslashit(get_bloginfo('wpurl')) . PLUGINDIR . '/' . dirname(plugin_basename(__FILE__));
16

22	$lyteSettings[1]="lyte-min.js";
23	}
24

25	$oSize = (int) get_option('size');
26	if ((is_bool($oSize)) \|\| ($pSize[$oSize]['a']===false)) { $sel = (int) $pDefault; } else { $sel= $oSize; }
27	$lyteSettings[2]=$pSize[$sel]['w'];

51	$noscript_post="";
52	$lytelinks_txt="<div class=\"lL\">Watch this video <a href=\"http://youtu.be/".$match[3]."\">on YouTube</a>.</div>";
53	}
54	+ $lytetemplate = "<div class=\"lyte\" id=\"".$match[3]."\" style=\"width:".$lyteSettings[2]."px;height:".$lyteSettings[3]."px;\"><noscript><a href=\"http://youtu.be/".$match[3]."\"><img src=\"http://img.youtube.com/vi/".$match[3]."/0.jpg\">".$noscript_post."</a></noscript><script type=\"text/javascript\">/<![CDATA[/var bU='".$lyteSettings[0]."';pW='".$lyteSettings[2]."';pH='".$lyteSettings[3]."';var d=document;if(d.addEventListener){d.addEventListener('DOMContentLoaded', insert, false)}else{window.onload=insert} function insert(){if(!d.getElementById('lytescr')){lytescr=d.createElement('script');lytescr.async=true;lytescr.id='lytescr';lytescr.src='".$lyteSettings[0].$lyteSettings[1]."';h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(lytescr, h)}};/]]>/</script></div>".$lytelinks_txt;
55	$the_content = preg_replace("/httpv:\/\/([a-zA-Z0-9\-\_]+\.\|)youtube\.com\/watch(\?v\=\|\/v\/)([a-zA-Z0-9\-\_]{11})([^\s<]*)/", $lytetemplate, $the_content, 1);
56	}
57	}