I’m spending some of the last hours of 2012 as a preparation for one of my 2013 resolutions; a new version of WP YouTube Lyte that will be fully responsive. I just finished a “template” (i.e. plain static HTML + CSS, not integrated in the plugin yet) which I’m pretty happy with.
It features:
- A responsive player which in this test-case means a width of 820, shrinking when needed. The default width will remain an option.
- Closer to current YouTube look & feel with a black play button that becomes red on hover
- All player chrome loaded from just one image sprite (2 images in current, non-responsive version)
- Embedded microformat data for better search engine discovery (will probably be configurable, “off” by default)
- Works on all browsers (although e.g. positioning the play-button without CSS3 calc in e.g. IE8 and below is less precise)
You can check out the template on http://dl.dropbox.com/u/9207036/new_lyte_test.html. Feel free to give feedback on this early test-implementation.
On my site I use this play button because it looks better http://i49.tinypic.com/29ogz1x.png and it does not have the crisp edges.
The edges in the sprite-image could indeed still be improved (I’ll add it to my todo-list), but the button you use is the old look & feel which YouTube doesn’t use any more, no?
A quick follow-up: I’ve done some plastic surgery on the play-buttons in the sprite, looks a bit better already.
Could be. Youtube changes every week.
An responsive Youtube Lyte will be available anytime soon? If not official atlast as a betta testing version … 😀
Good to know someone is willing to beta-test :-p
I’ll have a first version ready for the first half of february (maybe a bit earlier, but don’t want to set your expectations too high). I’ll keep you posted!
Many thanks.
One more thing if I’m not bothering, actually there are 2 such kind of plugins, yours that uses youtube url and the other that uses shortcode.
On the teme I just dumped(too many unusefull things, it even had it’s own fetured image field not wp one) yours worked and the other one didn’t(shortcode conflict with theme’s shortcode). On my actual theme the other one works and yours that is much better doesn’t. Instead of the video/video image it displays the space blank and I’m kinda puzzled.
that’s weird. do you have a URL where I could check out what is going on?
http://colle.ro/one-mic/
the blank space
at first glance it looks like there’s a problem with the open web tracker javascript which messes up wp youtube lyte javascript (which comes right after). probably just the missing closing javascript-tag in the web tracker-code.
Thanks everything solved. I was testing OWA with my old theme and with the analytics code I copied that one too.
hallo …
i’m trying to use WP YouTube Lyte in a responsive theme. It basically works : I’m using two wrappers following this approach: http://www.hexagonwebworks.com/2012/responsive-videos-updated/
When the video plays Safari, Opera and Chrome do well, Firefox reloads after scaling the browser window and the start/stop btns won’t work ( though the spacebar does) … no IE to test…all on mac so far
but there is still an annoying detail : I couldn’t find a way to make the play btn center and scale with the rest … it sits in the same div with the navigation bar and has no individual CSS class assigned… any idea how to control or replace the thing ???
the site I’m working on: http://www.raphaeljun.net
( don’t worry about the audio of the test vid – it’s like that)
Any answer is greatly appreciated – thanx
best wishes from France
Micky
Pas mal Micky, pas mal du tout!
Did a quick test in FF19b on WinXP and there’s no reloading to be seen, seems like a mac-specific bug. Also seems to work OK on IE8 by the way.
Regarding the position of the play-button; the problem is that with the current version of WP YouTube Lyte the position is calculated while initializing (in JavaScript, cfr. /wp-content/plugins/wp-youtube-lyte/lyte/lyte.js with this line;
pImg="<img src=\"" + bU + "play.png\" width=\"83px\" height=\"55px\" alt=\"Click to play\" style=\"margin-top:" + ((pH / 2) - 30) + "px;opacity:0.7;\" onmouseover=\"this.style.opacity=1;\" onmouseout=\"this.style.opacity=0.8;\"/>";The next version (1.2.0) positions the play-button with pure CSS instead of the inline-style-through-JavaScript-hackery and will automatically adapt that posistion to the changing player size. But coincidentally (or not), the main feature of that nearby update will be responsiveness. You can see the new approach for LYTE-player on this stand-alone page. If you can, it might be worth waiting for a first beta-release (which I hope to push one of these days) instead of making that might (but probably will not) break with the WP YouTube Lyte update?
Bien à toi,
frank
Hallo Frank,
Thank you for the quick reply … and for the testing :-))
Finally I modified the pngs of the play btn and the controls and set their width, height and margin params to 0 in the line of code you showed in your answer. That was it .. now the fake play btn scales with the rest.
Last thing I couldn’t find out is how to change the background of the “lyte hidef lP” class to black …I didn’t find the spot in the script. No CSS would work. … with a black bg the “video” wouldn’t “flash white” before the player is loaded.
I would like to try out your responsive version when it’s ready – let me know . Ill check back to test it.
Thank you
Micky
For the black background you’ll have to go into /wp-content/plugins/wp-youtube-lyte/wp-youtube-lyte.php, search for
.lP {background-color:#fff;margin:5px ".$pos.";}and replace it with
.lP {background-color:#000;margin:5px ".$pos.";}Concerning the new version of WP YouTube Lyte; you can find up-to-date info on what it does and where to download here. Looking forward to your feedback!
Yes , that was it, thanks again for the hints.
Looking forward to test the new version of the plugin
Micky