WP YouTube Lyte - Version 0.3.0

Version Description

added very experimental support for embedded html5 video (see faq)

Release Info

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

Code changes from version 0.2.2 to 0.3.0

Files changed (5) hide show

lyte/controls-newtube.png +0 -0
lyte/lyte-newtube-min.js +1 -0
options.php +19 -8
readme.txt +25 -8
wp-youtube-lyte.php +15 -6

lyte/controls-newtube.png ADDED Viewed

Binary file

lyte/lyte-newtube-min.js ADDED Viewed

	@@ -0,0 +1 @@

+ if (typeof bU!=="string") var bU="http://futtta.be/lyte/";function lyte(){lytes=getElementsByClassName("lyte");for(var i=0;i<lytes.length;i++){lyte_id=lytes[i].id;p=document.getElementById(lyte_id);jsonUrl="http://gdata.youtube.com/feeds/api/videos/"+lyte_id+"?fields=id,title&alt=json-in-script&callback=parseMe";loadScript(jsonUrl);pl=document.createElement('div');p.appendChild(pl);p.onclick=nolyte;setStyle(p,'width:650px;height:390px;margin:5px 0px;background-color:#000;overflow:hidden;position: relative;');pl.id="lyte_"+lyte_id;setStyle(pl,"overflow:hidden;width:650px;height:390px;cursor:pointer;text-align:center;overflow:hidden;position:relative;margin:0px;");pl.innerHTML="<img src=\""+bU+"play.png\" alt=\"Click to play this video\" style=\"margin-top: 165px;opacity:0.8;\" onmouseover=\"this.style.opacity=1;\" onmouseout=\"this.style.opacity=0.8;\"/><img src=\""+bU+"controls-newtube.png\" width=\"100%\" alt=\"\" style=\"position:absolute; left:0px; bottom:0px;\"/>";pl.style.background="#000 url(http://img.youtube.com/vi/"+lyte_id+"/0.jpg) no-repeat top center"}}function nolyte(){this.onclick="";uA=navigator.userAgent;if (uA.indexOf('AppleWebKit')!=-1){vC="-125px";hC="-17px";} else {vC="-125px";hC="-25px";} this.innerHTML="<iframe style=\"overflow: hidden; height: 1600px; width: 1024px; position: absolute; top:"+vC+"; left:"+hC+";\" src=\"http://www.youtube.com/watch?v="+this.id+"\"></iframe><br/>"}function parseMe(r){title=r.entry.title.$t;idu=r.entry.id.$t;p=document.getElementById("lyte_"+idu.substring((idu.length-11)));c=document.createElement('div');p.appendChild(c);setStyle(c,"position:relative;margin:-210px 5px;padding:5px;background-color:rgba(0,0,0,0.3);-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px");t=document.createElement('div');c.appendChild(t);s="font-weight:bold;font-size:16px;color:#ffffff;font-family:sans-serif;text-align:left;";setStyle(t,s);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=document.createElement('script');scr.src=url;scr.type='text/javascript';document.getElementsByTagName('head')[0].appendChild(scr)}var getElementsByClassName=function(className,tag,elm){if(document.getElementsByClassName){getElementsByClassName=function(className,tag,elm){elm=elm||document;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(document.evaluate){getElementsByClassName=function(className,tag,elm){tag=tag||"*";elm=elm||document;var classes=className.split(" "),classesToCheck="",xhtmlNamespace="http://www.w3.org/1999/xhtml",namespaceResolver=(document.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=document.evaluate(".//"+tag+classesToCheck,elm,namespaceResolver,0,null)}catch(e){elements=document.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||document;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();

options.php CHANGED Viewed

	@@ -7,6 +7,7 @@ function lyte_create_menu() {
7	}
8
9	function register_mysettings() {

10	register_setting( 'lyte-settings-group', 'show_links' );
11	}
12
	@@ -18,15 +19,24 @@ function lyte_settings_page() {
18	<form method="post" action="options.php">
19	<?php settings_fields( 'lyte-settings-group' ); ?>
20	<table class="form-table">









21	<tr valign="top">
22	- <th scope="row">Show links below the embedded videos?</th>
23	- <td>
24	- <fieldset><legend class="screen-reader-text"><span>Show links?</span></legend>
25	- <label title="Show YouTube-link"><input type="radio" name="show_links" value="1" <?php if (get_option('show_links')==="1") echo "checked" ?> /> Add YouTube-link.</label><br />
26	- <label title="Show YouTube and Ease YouTube link"><input type="radio" name="show_links" value="2" <?php if (get_option('show_links')==="2") echo "checked" ?> /> Add both a YouTube and a <a href="http://icant.co.uk/easy-youtube/docs/index.html" target="_blank">Easy YouTube</a>-link.</label><br />
27	- <label title="Don't include links."><input type="radio" name="show_links" value="0" <?php if ((get_option('show_links')!=="1") && (get_option('show_links')!=="2")) echo "checked" ?> /> Don't add any links.</label>
28	- </fieldset>
29	- </td>
30	</tr>
31	</table>
32
	@@ -37,3 +47,4 @@ function lyte_settings_page() {
37	</form>
38	</div>
39	<?php } ?>


7	}
8
9	function register_mysettings() {
10	+ register_setting( 'lyte-settings-group', 'newTube' );
11	register_setting( 'lyte-settings-group', 'show_links' );
12	}
13

19	<form method="post" action="options.php">
20	<?php settings_fields( 'lyte-settings-group' ); ?>
21	<table class="form-table">
22	+ <tr valign="top">
23	+ <th scope="row">Use Flash or HTML5 video?</th>
24	+ <td>
25	+ <fieldset><legend class="screen-reader-text"><span>Use Flash or HTML5 video?</span></legend>
26	+ <label title="normal YouTube embeds with Flash video"><input type="radio" name="newTube" value="0" <?php if (get_option('newTube')!=="1") echo "checked" ?> /> Normal YouTube embeds with Flash video. Player size: 480X385px.</label><br />
27	+ <label title="embed HTML5 video (highly experimental)"><input type="radio" name="newTube" value="1" <?php if (get_option('newTube')==="1") echo "checked" ?> /> Embed HTML5 video (<a href="http://wordpress.org/extend/plugins/wp-youtube-lyte/faq/" target="_blank">very experimental, see FAQ</a>). Player size: 650X390.</label><br />
28	+ </fieldset>
29	+ </td>
30	+ </tr>
31	<tr valign="top">
32	+ <th scope="row">Show links below the embedded videos?</th>
33	+ <td>
34	+ <fieldset><legend class="screen-reader-text"><span>Show links?</span></legend>
35	+ <label title="Show YouTube-link"><input type="radio" name="show_links" value="1" <?php if (get_option('show_links')==="1") echo "checked" ?> /> Add YouTube-link.</label><br />
36	+ <label title="Show YouTube and Ease YouTube link"><input type="radio" name="show_links" value="2" <?php if (get_option('show_links')==="2") echo "checked" ?> /> Add both a YouTube and a <a href="http://icant.co.uk/easy-youtube/docs/index.html" target="_blank">Easy YouTube</a>-link.</label><br />
37	+ <label title="Don't include links."><input type="radio" name="show_links" value="0" <?php if ((get_option('show_links')!=="1") && (get_option('show_links')!=="2")) echo "checked" ?> /> Don't add any links.</label>
38	+ </fieldset>
39	+ </td>
40	</tr>
41	</table>
42

47	</form>
48	</div>
49	<?php } ?>
50	+

readme.txt CHANGED Viewed

	@@ -1,21 +1,21 @@
1	=== Plugin Name ===
2	Contributors: futtta
3	- Tags: youtube, video, lyte, lite youtube embeds
4	Requires at least: 2.9
5	Tested up to: 2.9.2
6	- Stable tag: 0.2.2
7
8	"Lite YouTube Embeds" look like normal YouTube embeds but don't use Flash unless clicked, thus reducing download size & page rendering time.
9
10	== Description ==
11
12	- 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 _reducing download size & rendering time substantially_. Just add a YouTube-link with "httpv" instead of "http" and WP-YouTube-~~lyte~~ will replace that link with the correct (flash-less) code.
13
14	- WP-~~Youtube~~-~~lyte~~ implements [LYTE](http://blog.futtta.be/2010/04/23/high-performance-youtube-embeds/ "High Performance YouTube embeds"), which is a small javascript-library that creates a "dummy" YouTube-player which includes the clip thumbnail and title. When clicked on, the dummy player is seamlessly replaced by the Flash player.
15
16	- ~~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~~, ~~...~~).
17
18	- ~~__Coming~~ in ~~v0.3__:~~ ~~support~~ ~~for~~ ~~_html5~~ ~~youtube~~ ~~embeds_ using [newTube.js~~](http://~~futtta~~.be/~~newTube~~/)
19
20	== Installation ==
21
	@@ -26,15 +26,32 @@ Installation is very straightforward:
26	3. Place a link to a YouTube clip like this; httpv://www.youtube.com/watch?v=_SQkWbRublY
27
28	== Frequently Asked Questions ==















29	= What features might be added at a later stage? =
30	- * Extra options in the admin-page, e.g. the default size of your video (now: 480X385)
31	* Having the video title link to the YouTube-page
32	- * Inclusion of [newTube.js](http://futtta.be/newTube/) for html5 YouTube video embedding
33
34	= But I would like yet other features to be added! =
35	Just ask, I'll see what I can do.
36
37	== Changelog ==



38	= 0.2.2 =
39	* improved the html of the form in options.php for better accessibility
40


1	=== Plugin Name ===
2	Contributors: futtta
3	+ Tags: youtube, video, lyte, lite youtube embeds, html5 video
4	Requires at least: 2.9
5	Tested up to: 2.9.2
6	+ Stable tag: 0.3.0
7
8	"Lite YouTube Embeds" look like normal YouTube embeds but don't use Flash unless clicked, thus reducing download size & page rendering time.
9
10	== Description ==
11
12	+ 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 _reducing download size & rendering time substantially_. Just add a YouTube-link with "httpv" instead of "http" and WP-YouTube-Lyte will replace that link with the correct (flash-less) code.
13
14	+ WP-YouTube-Lyte implements [LYTE](http://blog.futtta.be/2010/04/23/high-performance-youtube-embeds/ "High Performance YouTube embeds"), which is a small javascript-library that creates a "dummy" YouTube-player which includes the clip thumbnail and title. When clicked on, the dummy player is seamlessly replaced by the Flash video player.
15
16	+ Since version 0.3 experimental support for embedding html5 YouTube video is available (implementing [newTube.js](http://blog.futtta.be/2010/02/04/embedding-youtube-html5-video-with-newtube/)), meaning WP-YouTube-Lyte allows for an entirely flash-less YouTube experience on your blog displaying YouTube's HTML5 video in h264 or the new WebM-coded. There are some caveats though, see [FAQ](http://wordpress.org/extend/plugins/wp-youtube-lyte/faq/) for more info.
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

26	3. Place a link to a YouTube clip like this; httpv://www.youtube.com/watch?v=_SQkWbRublY
27
28	== Frequently Asked Questions ==
29	+ = What does "experimental html5 video support" mean? =
30	+
31	+ There are some preconditions to see the HTML5 video, if these aren't met you'll see a Flash-version:
32	+ * It only works in browsers that support the h264 (Safari, Chrome, IE9) or webm (currently development versions of Chrome, Opera and Firefox) video codecs
33	+ * You have to be enrolled in the [YouTube html5 beta](http://www.youtube.com/html5)
34	+
35	+ There are also some possible issues:
36	+ * It might break if YouTube [implements x-frame-options](http://blog.futtta.be/tag/x-frame-options/) for their video-pages
37	+ * Positioning of the player might be a few pixels off in some browsers
38	+ * Some buttons in the embedded player (e.g. view full screen) won't function properly
39	+ * This might (not) work on iphone/ipod/ipad's (there are known issues with iframes & overflow in mobile Safari that might affect html5 embedding, feedback is welcome)
40	+
41	+ = But YouTube does not provide embedded html5 video, so how can this work? =
42	+ It's an re-implementation of [an earlier experiment called 'newTube.js'](http://blog.futtta.be/2010/02/04/embedding-youtube-html5-video-with-newtube/). newTube.js is sort of a dirty hack which replaces the LYTE dummy player with an iframe with overflow:hidden, in which the full YouTube-page is carefully positioned to display only the player.
43	+
44	= What features might be added at a later stage? =
45	+ * Extra options in the admin-page, e.g. the default size of your video (now: 480X385 for normal YouTube flash-based video)
46	* Having the video title link to the YouTube-page

47
48	= But I would like yet other features to be added! =
49	Just ask, I'll see what I can do.
50
51	== Changelog ==
52	+ = 0.3.0 =
53	+ * added very experimental support for embedded html5 video (see [faq](http://wordpress.org/extend/plugins/wp-youtube-lyte/faq/))
54	+
55	= 0.2.2 =
56	* improved the html of the form in options.php for better accessibility
57

wp-youtube-lyte.php CHANGED Viewed

	@@ -4,19 +4,28 @@ Plugin Name: WP YouTube Lyte
4	Plugin URI: http://blog.futtta.be/tag/lyte
5	Description: WordPress Lite YouTube Embeds (look ma, even faster!) in posts.
6	Author: Frank (futtta) Goossens
7	- Version: 0.2.2
8	Author URI: http://blog.futtta.be/
9	*/

10	require(dirname(__FILE__).'/options.php');
11
12	$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__));
13
14	- $~~lyteUrl~~=$wp_lyte_plugin_url."lyte/";








15
16	- $~~show_links~~=get_option('show_links');
17
18	function lyte_parse($the_content) {
19	- global $~~lyteUrl, $show_links~~;
20	if(strpos($the_content, "httpv")!==FALSE ) {
21	$char_codes = array('×','–');
22	$replacements = array("x", "--");
	@@ -24,8 +33,8 @@ function lyte_parse($the_content) {
24
25	preg_match_all("/httpv:\/\/([a-zA-Z0-9\-\_]+\.\|)youtube\.com\/watch(\?v\=\|\/v\/)([a-zA-Z0-9\-\_]{11})([^<\s]*)/", $the_content, $matches, PREG_SET_ORDER);
26	foreach($matches as $match) {
27	- $lytetemplate="<div class=\"lyte\" id=\"".$match[3]."\" style=\"~~width:480;height:385;\~~"><noscript><a href=\"http://youtu.be/".$match[3]."\">Watch on YouTube</a> or on <a href=\"http://icant.co.uk/easy-youtube/?http://www.youtube.com/watch?v=".$match[3]."\">Easy Youtube</a></noscript><script>var bU='".$~~lyteUrl~~."';(function(){d=document;if(!document.getElementById('lytescr')){lyte=d.createElement('script');lyte.async=true;lyte.id='lytescr';lyte.src='".$~~lyteUrl~~."~~lyte-min.js~~';d.getElementsByTagName('head')[0].appendChild(lyte)}})();</script></div>";
28	- switch ($~~show_links~~) {
29	case "1":
30	$lytetemplate .= "<div id=\"lytelinks\" style=\"margin:0px 0px 10px 0px;\">Or watch this video <a href=\"http://youtu.be/".$match[3]."\">on YouTube</a>.</div>";
31	break;


4	Plugin URI: http://blog.futtta.be/tag/lyte
5	Description: WordPress Lite YouTube Embeds (look ma, even faster!) in posts.
6	Author: Frank (futtta) Goossens
7	+ Version: 0.3.0
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
15	+ $lyteSettings[0]=$wp_lyte_plugin_url."lyte/";
16	+
17	+ if (get_option('newTube')==="1") {
18	+ $lyteSettings[1]="width:650;height:390;";
19	+ $lyteSettings[2]="lyte-newtube-min.js";
20	+ } else {
21	+ $lyteSettings[1]="width:480;height:385;";
22	+ $lyteSettings[2]="lyte-min.js";
23	+ }
24
25	+ $lyteSettings[3]=get_option('show_links');
26
27	function lyte_parse($the_content) {
28	+ global $lyteSettings;
29	if(strpos($the_content, "httpv")!==FALSE ) {
30	$char_codes = array('×','–');
31	$replacements = array("x", "--");

33
34	preg_match_all("/httpv:\/\/([a-zA-Z0-9\-\_]+\.\|)youtube\.com\/watch(\?v\=\|\/v\/)([a-zA-Z0-9\-\_]{11})([^<\s]*)/", $the_content, $matches, PREG_SET_ORDER);
35	foreach($matches as $match) {
36	+ $lytetemplate="<div class=\"lyte\" id=\"".$match[3]."\" style=\"".$lyteSettings[1]."\"><noscript><a href=\"http://youtu.be/".$match[3]."\">Watch on YouTube</a> or on <a href=\"http://icant.co.uk/easy-youtube/?http://www.youtube.com/watch?v=".$match[3]."\">Easy Youtube</a></noscript><script>var bU='".$lyteSettings[0]."';(function(){d=document;if(!document.getElementById('lytescr')){lyte=d.createElement('script');lyte.async=true;lyte.id='lytescr';lyte.src='".$lyteSettings[0].$lyteSettings[2]."';d.getElementsByTagName('head')[0].appendChild(lyte)}})();</script></div>";
37	+ switch ($lyteSettings[3]) {
38	case "1":
39	$lytetemplate .= "<div id=\"lytelinks\" style=\"margin:0px 0px 10px 0px;\">Or watch this video <a href=\"http://youtu.be/".$match[3]."\">on YouTube</a>.</div>";
40	break;