Improving quality of the "Youtube" buttons

Hiya Draikin;
I’ve just seen an embedded player with the new UI, would be great if you could contribute a nice sprite that matches that style ??

frank

I indeed read that they started pushing the update live for everyone today. I’ll take a look at it!

From what I’m seeing, the embedded players now have a lot less features. It’s just the title, a “watch later” and a “share” button, and then the play button in the middle. Are you seeing the same as well? It would certainly make it easier to replicate.

Here’s a new sprite using the icons mentioned above. If anything else needs to be added, I can look into that as well, but so far I haven’t seen embeds that show more than that. The title and positioning would need to be done using CSS, let me know if you need any help with that.

Afraid I would need the bottom “play”-bar as well, as it’s the only thing visible for “audio-only” lytes, could you add the 3 bottom elements as well?

frank

I’ll try and add those later this week.

looking forward to that Draikin! ??

I haven’t gotten around to this yet, but I think I should be able to finish this during the weekend. Do you intend to push out an update with the UI changes alone?

yep, I would push this as an update, I’ve had questions about it even ??

frank

Sorry for the wait, this took me more time than expected. There’s three files here. The new lytespryte, which now has no actual background anymore. What’s new are the top and bottom gradients. These need to be positioned at the top and bottom of the video window, underneath the lytespryte elements.

lytespryte 2015
top gradient
bottom gradient

I could merge these images but then the layout of the lytespryte would change completely. I didn’t add a button to the timeline because it’s only visible when you hover over the video. I’m not sure if you need that for the “audio-only” lytes? Let me know if this works.

great, I’ll see what I can cook up with those fine ingredients! ??

so, I think I got there, cfr. https://futtta.be/wordpress/blog/2015/08/07/video-test/

some remarks;

• I did not add the top left UI-elements (watch later & the other)
• the top gradient is in, but using linear-gradient instead of the image: .tC{background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.0))}
• I left the bottom element visible, I feel like the player is more recognizable that way (but can easily be hidden with css)
• no bottom gradient, but just 0.3 opacity (couldn’t get linear-gradient working)

Am going to test some more + looking at some other smaller tweaks (e.g. on mobile currently the embed is not lyte, but will switch to that with downside that users will have to click twice to play).

let me know what you think ??

frank

oh, can you maybe write me a small mail at futtta-at-gmail-dot-com, so I can contact you if/ when this thread gets closed?

I’ll send you an e-mail. The preview looks good, a couple of minor things I noticed:

• About the bottom elements: personally I’d have those disabled by default since it no longer seems possible to display those on the preview. So this kind of betrays the fact that it’s a custom solution. That said it’s not a problem for me since I can just hide it using CSS.
• The font of the title is also different (in fact it seems to fall back to Arial in Firefox here), Google is using Roboto but that’s of course a Google font. So using @font-face would mean potentially slowing down load time and that’s something that Youtube Lyte probably wants to avoid. I’m not sure if there’s a perfect solution here. Personally I’d probably want to load the font to try and get a near-identical presentation but that’s just me.
• Another minor thing is that the timeline on the Youtube player still has some space between the left and right side. At the moment it runs across the entire width on your example.

re. bottom elements; you’ve got a point there. maybe I’ll hide them by default on non-audio-only instead (unhiding is easy enough as well).

re. font; I could refer to the google font for the title without actually loading it. that way if you (or anyone else) decides to enqueue the correct google font CSS, it’ll be used and else the generic (and faster) sans-serif is use

re. bottom bar left & right margin; you’re right, but couldn’t get .ctrl{width:96%;margin:0px auto;} working to be honest (or maybe I didn’t try hard enough) ?? but if you can get it working i’ll be happy to include that!

frank