Version Description
- add options to change player size (does not apply to html5-version)
- noscript optimizations: show image (typically useful in rss-feeds), no text if config is to show links beneath lyte-player
Download this release
Release Info
Developer | futtta |
Plugin | WP YouTube Lyte |
Version | 0.4.0 |
Comparing to | |
See all releases |
Code changes from version 0.3.5 to 0.4.0
- lyte/lyte-min.js +1 -1
- options.php +27 -4
- player_sizes.inc +33 -0
- readme.txt +10 -2
- wp-youtube-lyte.php +25 -14
lyte/lyte-min.js
CHANGED
@@ -1 +1 @@
|
|
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,'margin:5px 0px;width:
|
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,'margin:5px 0px;width:'+pW+'px;height:'+pH+'px;background-color:#000;');pl.id="lyte_"+lyte_id;setStyle(pl,'cursor:pointer;text-align:center;overflow:hidden;height:'+pH+'px;width:'+pW+'px;position:relative;margin:0px;');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.png\" width=\"100%\" alt=\"\" style=\"position:absolute; left:0px; bottom:0px; max-width:"+pW+"px; padding:0px; spacing:0px;\"/>";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.com/v/"+this.id+"&autoplay=1&rel=0&egm=0\" type=\"application/x-shockwave-flash\" 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=document.getElementById("lyte_"+idu.substring((idu.length-11)));c=document.createElement('div');p.appendChild(c);setStyle(c,"position:relative;margin:-"+((pH/2)+15)+"px 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
@@ -9,6 +9,7 @@ function lyte_create_menu() {
|
|
9 |
function register_lyte_settings() {
|
10 |
register_setting( 'lyte-settings-group', 'newTube' );
|
11 |
register_setting( 'lyte-settings-group', 'show_links' );
|
|
|
12 |
}
|
13 |
|
14 |
function lyte_settings_page() {
|
@@ -16,18 +17,40 @@ function lyte_settings_page() {
|
|
16 |
<div class="wrap">
|
17 |
<h2>WP YouTube Lyte Settings</h2>
|
18 |
|
|
|
|
|
|
|
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">
|
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.
|
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>).
|
28 |
</fieldset>
|
29 |
</td>
|
30 |
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
31 |
<tr valign="top">
|
32 |
<th scope="row">Show links below the embedded videos?</th>
|
33 |
<td>
|
@@ -37,7 +60,7 @@ function lyte_settings_page() {
|
|
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 |
-
|
41 |
</table>
|
42 |
|
43 |
<p class="submit">
|
9 |
function register_lyte_settings() {
|
10 |
register_setting( 'lyte-settings-group', 'newTube' );
|
11 |
register_setting( 'lyte-settings-group', 'show_links' );
|
12 |
+
register_setting( 'lyte-settings-group', 'size' );
|
13 |
}
|
14 |
|
15 |
function lyte_settings_page() {
|
17 |
<div class="wrap">
|
18 |
<h2>WP YouTube Lyte Settings</h2>
|
19 |
|
20 |
+
<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 (the HTML5-option even allows for entirely Flash-less YouTube embeds), thereby <a href="http://blog.futtta.be/2010/04/23/high-performance-youtube-embeds/" target="_blank">reducing download size & rendering time substantially</a>. 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>
|
21 |
+
<p>You can embed the LYTE-player by adding one or more YouTube-links to your post, replacing the "http://" with "httpv://" (just add a 'v' for 'video'). WP-YouTube-Lyte will replace those links with the correct (flash-less) code.</p>
|
22 |
+
<p>You can modify WP-YouTube-Lyte's behaviour by changing the following settings:</p>
|
23 |
<form method="post" action="options.php">
|
24 |
<?php settings_fields( 'lyte-settings-group' ); ?>
|
25 |
<table class="form-table">
|
26 |
<tr valign="top">
|
27 |
+
<th scope="row">Play video using Flash or HTML5-video?</th>
|
28 |
<td>
|
29 |
<fieldset><legend class="screen-reader-text"><span>Use Flash or HTML5 video?</span></legend>
|
30 |
+
<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. You can set player size below.</label><br />
|
31 |
+
<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>). Fixed player size: 650X390px.</label><br />
|
32 |
</fieldset>
|
33 |
</td>
|
34 |
</tr>
|
35 |
+
<tr valign="top">
|
36 |
+
<th scope="row">Player size (has no effect on fixed-size HTML5-version)?</th>
|
37 |
+
<td>
|
38 |
+
<fieldset><legend class="screen-reader-text"><span>Player size (does not work for HTML5-version)</span></legend>
|
39 |
+
<?php require 'player_sizes.inc';
|
40 |
+
$i=0;
|
41 |
+
if (is_bool(get_option('size'))) { $sel = (int) $pDefault; } else { $sel= (int) get_option('size'); }
|
42 |
+
while ($pS=$pSize[$i]) {
|
43 |
+
if ($pS[a]===true) {
|
44 |
+
?>
|
45 |
+
<label title="<?php echo $pS[w]."X".$pS[h]; ?>"><input type="radio" name="size" value="<?php echo $i."\"";if($i===$sel) echo " checked";echo " /> ".$pS[w]."X".$pS[h]." (".$pS[t];?>)</label><br />
|
46 |
+
<?php
|
47 |
+
}
|
48 |
+
$i++;
|
49 |
+
}
|
50 |
+
?>
|
51 |
+
</fieldset>
|
52 |
+
</td>
|
53 |
+
</tr>
|
54 |
<tr valign="top">
|
55 |
<th scope="row">Show links below the embedded videos?</th>
|
56 |
<td>
|
60 |
<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>
|
61 |
</fieldset>
|
62 |
</td>
|
63 |
+
</tr>
|
64 |
</table>
|
65 |
|
66 |
<p class="submit">
|
player_sizes.inc
ADDED
@@ -0,0 +1,33 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<?php
|
2 |
+
$pDefault=2;
|
3 |
+
|
4 |
+
$pSize[0][a]=true;
|
5 |
+
$pSize[0][w]=425;
|
6 |
+
$pSize[0][h]=344;
|
7 |
+
$pSize[0][t]="Smaller 3:4 player";
|
8 |
+
|
9 |
+
$pSize[1][a]=true;
|
10 |
+
$pSize[1][w]=560;
|
11 |
+
$pSize[1][h]=340;
|
12 |
+
$pSize[1][t]="Smaller 16:9 player";
|
13 |
+
|
14 |
+
$pSize[2][a]=true;
|
15 |
+
$pSize[2][w]=480;
|
16 |
+
$pSize[2][h]=385;
|
17 |
+
$pSize[2][t]="Standard value, YouTube default for 4:3-ratio video";
|
18 |
+
|
19 |
+
$pSize[3][a]=true;
|
20 |
+
$pSize[3][w]=640;
|
21 |
+
$pSize[3][h]=385;
|
22 |
+
$pSize[3][t]="YouTube default for 16:9-ratio video";
|
23 |
+
|
24 |
+
$pSize[4][a]=true;
|
25 |
+
$pSize[4][w]=640;
|
26 |
+
$pSize[4][h]=505;
|
27 |
+
$pSize[4][t]="Larger 3:4 player";
|
28 |
+
|
29 |
+
$pSize[5][a]=true;
|
30 |
+
$pSize[5][w]=853;
|
31 |
+
$pSize[5][h]=505;
|
32 |
+
$pSize[5][t]="Larger 16:9 player";
|
33 |
+
?>
|
readme.txt
CHANGED
@@ -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
|
6 |
-
Stable tag: 0.
|
7 |
|
8 |
"Lite YouTube Embeds" look like normal YouTube embeds but don't use Flash, thus reducing download size & page rendering time.
|
9 |
|
@@ -44,14 +44,22 @@ HTML5 video will not be visible for everyone (see requirements), some visitors w
|
|
44 |
= But YouTube does not provide embedded html5 video, so how can this work? =
|
45 |
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.
|
46 |
|
|
|
|
|
|
|
|
|
47 |
= What features might be added at a later stage? =
|
48 |
-
* Extra options in the admin-page, e.g. the default size of your video (now: 480X385 for normal YouTube flash-based video)
|
49 |
* Having the video title link to the YouTube-page
|
|
|
50 |
|
51 |
= But I would like yet other features to be added! =
|
52 |
Just ask, I'll see what I can do.
|
53 |
|
54 |
== Changelog ==
|
|
|
|
|
|
|
|
|
55 |
= 0.3.5 =
|
56 |
* changed function-name in options.php to avoid errors like "Fatal error: Cannot redeclare register_mysettings()"
|
57 |
|
3 |
Tags: youtube, video, lyte, lite youtube embeds, html5 video, html5
|
4 |
Requires at least: 2.9
|
5 |
Tested up to: 3.0
|
6 |
+
Stable tag: 0.4.0
|
7 |
|
8 |
"Lite YouTube Embeds" look like normal YouTube embeds but don't use Flash, thus reducing download size & page rendering time.
|
9 |
|
44 |
= But YouTube does not provide embedded html5 video, so how can this work? =
|
45 |
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.
|
46 |
|
47 |
+
= Any other bugs I should know about? =
|
48 |
+
* The YouTube-thumbnail doesn't fit in the smaller-sized player, which will typically be visible for 16:9 videos (as YouTube adds black border on top and bottom)
|
49 |
+
* The controls (play button & bottom control) are not optimized for the different sizes, they just scale along.
|
50 |
+
|
51 |
= What features might be added at a later stage? =
|
|
|
52 |
* Having the video title link to the YouTube-page
|
53 |
+
* Better quality controls for different sizes
|
54 |
|
55 |
= But I would like yet other features to be added! =
|
56 |
Just ask, I'll see what I can do.
|
57 |
|
58 |
== Changelog ==
|
59 |
+
= 0.4.0 =
|
60 |
+
* add options to change player size (does not apply to html5-version)
|
61 |
+
* noscript optimizations: show image (typically useful in rss-feeds), no text if config is to show links beneath lyte-player
|
62 |
+
|
63 |
= 0.3.5 =
|
64 |
* changed function-name in options.php to avoid errors like "Fatal error: Cannot redeclare register_mysettings()"
|
65 |
|
wp-youtube-lyte.php
CHANGED
@@ -4,7 +4,7 @@ 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.
|
8 |
Author URI: http://blog.futtta.be/
|
9 |
*/
|
10 |
|
@@ -15,14 +15,19 @@ $wp_lyte_plugin_url = defined('WP_PLUGIN_URL') ? trailingslashit(WP_PLUGIN_URL .
|
|
15 |
$lyteSettings[0]=$wp_lyte_plugin_url."lyte/";
|
16 |
|
17 |
if (get_option('newTube')==="1") {
|
18 |
-
|
19 |
-
$lyteSettings[2]="
|
|
|
20 |
} else {
|
21 |
-
|
22 |
-
|
23 |
-
|
|
|
|
|
|
|
|
|
24 |
|
25 |
-
$lyteSettings[
|
26 |
|
27 |
function lyte_parse($the_content) {
|
28 |
global $lyteSettings;
|
@@ -33,14 +38,20 @@ function lyte_parse($the_content) {
|
|
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 |
-
$
|
37 |
-
|
38 |
-
|
39 |
-
|
40 |
-
|
41 |
case "2":
|
42 |
-
|
43 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
44 |
$the_content = preg_replace("/httpv:\/\/([a-zA-Z0-9\-\_]+\.|)youtube\.com\/watch(\?v\=|\/v\/)([a-zA-Z0-9\-\_]{11})([^\s<]*)/", $lytetemplate, $the_content, 1);
|
45 |
}
|
46 |
}
|
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.4.0
|
8 |
Author URI: http://blog.futtta.be/
|
9 |
*/
|
10 |
|
15 |
$lyteSettings[0]=$wp_lyte_plugin_url."lyte/";
|
16 |
|
17 |
if (get_option('newTube')==="1") {
|
18 |
+
$lyteSettings[1]="lyte-newtube-min.js";
|
19 |
+
$lyteSettings[2]="650";
|
20 |
+
$lyteSettings[3]="390";
|
21 |
} else {
|
22 |
+
$lyteSettings[1]="lyte-min.js";
|
23 |
+
include 'player_sizes.inc';
|
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];
|
27 |
+
$lyteSettings[3]=$pSize[$sel][h];
|
28 |
+
}
|
29 |
|
30 |
+
$lyteSettings[4]=get_option('show_links');
|
31 |
|
32 |
function lyte_parse($the_content) {
|
33 |
global $lyteSettings;
|
38 |
|
39 |
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);
|
40 |
foreach($matches as $match) {
|
41 |
+
switch ($lyteSettings[4]) {
|
42 |
+
case "0":
|
43 |
+
$noscript_post="<br />Watch on YouTube";
|
44 |
+
$lytelinks_txt="";
|
45 |
+
break;
|
46 |
case "2":
|
47 |
+
$noscript_post="";
|
48 |
+
$lytelinks_txt="<div id=\"lytelinks\" style=\"margin:0px 0px 10px 0px;\">Watch this video <a href=\"http://youtu.be/".$match[3]."\">on YouTube</a> or on <a href=\"http://icant.co.uk/easy-youtube/?http://www.youtube.com/watch?v=".$match[3]."\">Easy Youtube</a>.</div>";
|
49 |
+
break;
|
50 |
+
default:
|
51 |
+
$noscript_post="";
|
52 |
+
$lytelinks_txt="<div id=\"lytelinks\" style=\"margin:0px 0px 10px 0px;\">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].";height:".$lyteSettings[3].";\"><noscript><a href=\"http://youtu.be/".$match[3]."\"><img src=\"http://img.youtube.com/vi/".$match[3]."/default.jpg\">".$noscript_post."</a></noscript><script>var bU='".$lyteSettings[0]."';pW='".$lyteSettings[2]."';pH='".$lyteSettings[3]."';(function(){d=document;if(!document.getElementById('lytescr')){lyte=d.createElement('script');lyte.async=true;lyte.id='lytescr';lyte.src='".$lyteSettings[0].$lyteSettings[1]."';d.getElementsByTagName('head')[0].appendChild(lyte)}})();</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 |
}
|