Draikin

Thanks for the answer. I’m guessing this means that the resized images are actually compressed twice, once by WordPress (since it also uses JPG) and then by JPEGmini?

Thank you for making the plugin! ??

Seems like the problem was caused by a closing tag missing for the if-statement on line 329 in that latest version I downloaded.

I tried the pre-1.6.0 version, it looks just about perfect now. Glad I could help! Just adding my username to the changelog is enough, thanks!

Thanks for the update. I think it’s very difficult to notice the difference between the actual player and the lyte placeholder now, so that’s good! The transparency for the inactive button is there, but it’s just not very noticeable on your example. On your other videos, you can see the button is actually transparent. The only difference I’m noticing right now is the top title bar background which is set to rgba(0, 0, 0, 0.5), but Youtube uses rgba(0, 0, 0, 0.8). The height of the title bar is also 30px on Youtube, but that’s nitpicking again ??

I gave the 1.6 a try after making an API key and everything seems to work.

I haven’t made a plugin yet but I guess this would be a good start! Thanks for adding the new filters. I’m having some trouble getting the latest version to work though, and I’m not sure what’s causing it. I’ll investigate this later.

Here’s the updated sprite. Let me know if it works or if any adjustments need to be made. I ran the PNG through just about all PNG compression utilities available so it’s already optimized. The buttons aren’t exactly the same size, so the position may be slightly altered compared to the original. Also, I ended up saving the transparency of the inactive play button into the image itself. I assume you set the opacity for that button through CSS at the moment, but that would also make the center triangle transparent, which isn’t the case on the actual Youtube videos. So I think the opacity can be set to 1 now.

Regarding my comment about the link: you probably knew what I was trying to say but just in case, I meant to say that the link turns to #FFF color when you hover over it. Thanks for the other answers, I’ll look into the helper file.

How foolish of me. Of course it doesn’t work since I changed the functions.php of my child theme, but Jetpack Mobile uses its own theme with its own functions.php. So my code was never called. If I add the code to the Jetpack Mobile functions.php, it works. Now I just need to figure out if I can make this work without altering the Jetpack Mobile functions.php, but I’m guessing that should be possible in one way or another.

That said, I noticed the mobile version was still loading all the css deferred, despite no CSS being inlined. Adding an else tag to set this->defer to false in autoptimizeStyles.php if the inline code is empty (which it will be) appears to solve this:

if(!empty($defer_inline_code)){
…
} else
{
$this->defer = false;
}

I’m not sure if I can accomplish this with hooks, of if the above would be safe to add in a future update of AO.

Spent some time working on this. Since some elements of the player are rendered by the browser itself, I ended up redrawing them in an image editor. I have to do some more testing but it’s almost indistinguishable from the real thing now. I think I’ll have the new file ready tomorrow. A few additional notes (all just nitpicking really, and I might be willing to see if I can code some of these things myself):

• I used to just post the url in the post and let Youtube handle the embedding. This displays the video without the video controls (only the title, and the play button). This seems to be how it’s displayed on most, but not all, websites I visit. Youtube Lyte does seem to always display the video controls. I guess can just display: none it, but I’m not sure if there’s an option to disable the controls?
• The link at the opt of the video has the text color set to #CCC, and only turns into #FFF over it. In Youtube Lyte it’s always #FFF. In standard Youtube embeds, this link also redirects you to the Youtube.
• My blog posts are 625 pixels wide, and when I use the 640 pixels video it does get scaled correctly, but the preview image is an upscale from the 480px video. In standard Youtube embeds, it instead downscales the image from the 680px one. None of the methods is ideal, but I’d still prefer to use the higher quality images since the upscale is rather blurry.

I suspected caching as well, but I already cleared WP cache and disabled it. The odd thing is that if I disable the inline CSS in the AO options and reload both the desktop and mobile version in Chrome, they both instantly have the inline CSS removed. If I then enable it again, and I include the function above and reload them again, the desktop version doesn’t have the inline CSS, yet the mobile version does.

I now tried setting the inline CSS to an empty string in autoptimizeStyles.php directly right before it gets injected, and doing so does work for both versions. So it’s almost as if the filter isn’t applied when Jetpack loads the mobile theme, if that makes any sense…

Cool, I’ll get to work on that, I should be able to finish it this week. Just curious, but were the current sprites based on an older Youtube design?

Well, I’m actually trying this now, but the odd thing is that this:

add_filter(‘autoptimize_filter_css_defer_inline’,’jetpack_mobile_css_defer_inline’,10,1);
function jetpack_mobile_css_defer_inline($inlined) {
$inlined = ”;
return $inlined;
}

does prevent the inline css from being added for the desktop version, but the Jetpack Mobile version still has the inline CSS in the HTML page. I’m trying to figure out why this is happening. Disabling the inline CSS in the admin page does disable it correctly for both desktop and mobile.

Thanks, I’m not that familiar with PHP yet but I’ll give this a try and report back with the results! Jetpack has an example on their website on how to check if the mobile theme is active in a function so I think I should be able to get this to work.

Perhaps I misunderstand, but I don’t think that’s the cause of the problem. I think the mobile theme applies its own CSS, removing all the custom CSS from your default theme. I’ll verify later today, but I imagine the inline CSS is being injected into the mobile HTML page as well and it conflicts with the mobile theme’s CSS. I think the solution would be to prevent the inline CSS from being applied if it’s using the mobile theme. I’m not sure it’s possible to hook into a function somewhere and make the inline CSS conditional, based on whether or not the mobile theme is active?