WP YouTube Lyte - Version 0.4.1

Version Description

  • add fullscreen-button to player
  • disable size in options if html5 is selected
  • move player_sizes.inc to player_sizes.inc.php
Download this release

Release Info

Developer futtta
Plugin Icon 128x128 WP YouTube Lyte
Version 0.4.1
Comparing to
See all releases

Code changes from version 0.4.0 to 0.4.1

Files changed (6) hide show
  1. lyte/lyte-min.js +1 -1
  2. options.php +23 -8
  3. player_sizes.inc +0 -33
  4. player_sizes.inc.php +33 -0
  5. readme.txt +7 -2
  6. wp-youtube-lyte.php +2 -2
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:'+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();
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&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=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
@@ -16,9 +16,9 @@ function lyte_settings_page() {
16
  ?>
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' ); ?>
@@ -27,22 +27,22 @@ function lyte_settings_page() {
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++;
@@ -69,4 +69,19 @@ function lyte_settings_page() {
69
 
70
  </form>
71
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  <?php } ?>
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>
23
  <form method="post" action="options.php">
24
  <?php settings_fields( 'lyte-settings-group' ); ?>
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="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">rather experimental, see FAQ</a>). Fixed player size: 650X390px.</label><br />
31
+ <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.</label><br />
32
  </fieldset>
33
  </td>
34
  </tr>
35
  <tr valign="top">
36
+ <th scope="row">Player size (not for HTML5):</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.php';
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" class="l_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++;
69
 
70
  </form>
71
  </div>
72
+ <script type="text/javascript">
73
+ jQuery(document).ready(function($) {
74
+ function toggleSize() {
75
+ val=$("input[name='newTube']:checked").val();
76
+ if (val==0) {
77
+ $('.l_size').removeAttr("disabled")
78
+ } else {
79
+ $('.l_size').attr("disabled","disabled")
80
+ }
81
+ }
82
+
83
+ $("input[name='newTube']").click(function(){toggleSize()});
84
+ toggleSize();
85
+ })
86
+ </script>
87
  <?php } ?>
player_sizes.inc CHANGED
@@ -1,33 +0,0 @@
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
- ?>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
player_sizes.inc.php 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.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
 
@@ -46,7 +46,7 @@ It's an re-implementation of [an earlier experiment called 'newTube.js'](http://
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
@@ -56,6 +56,11 @@ It's an re-implementation of [an earlier experiment called 'newTube.js'](http://
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
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.1
7
 
8
  "Lite YouTube Embeds" look like normal YouTube embeds but don't use Flash, thus reducing download size & page rendering time.
9
 
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 (for now).
50
 
51
  = What features might be added at a later stage? =
52
  * Having the video title link to the YouTube-page
56
  Just ask, I'll see what I can do.
57
 
58
  == Changelog ==
59
+ = 0.4.1 =
60
+ * add fullscreen-button to player
61
+ * disable size in options if html5 is selected
62
+ * move player_sizes.inc to player_sizes.inc.php
63
+
64
  = 0.4.0 =
65
  * add options to change player size (does not apply to html5-version)
66
  * noscript optimizations: show image (typically useful in rss-feeds), no text if config is to show links beneath lyte-player
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.4.0
8
  Author URI: http://blog.futtta.be/
9
  */
10
 
@@ -20,7 +20,7 @@ if (get_option('newTube')==="1") {
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];
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.1
8
  Author URI: http://blog.futtta.be/
9
  */
10
 
20
  $lyteSettings[3]="390";
21
  } else {
22
  $lyteSettings[1]="lyte-min.js";
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];