YouTube changed the big red button to a png image

About: YouTube - Custom colors video progress bar Good rating
So yeah YouTube changed stuff again so the big red button for play is broken now. I have fixed it for my youtube style. Here is the code:

.ytp-large-play-button.ytp-button.ytp-red2:hover, .ytp-cued-thumbnail-overlay:hover .ytp-large-play-button.ytp-button.ytp-red2
{
background-image: url(https://raw.githubusercontent.com/RaitaroH/YouTube-DeepDark/master/YT_Images/large_play_button_hover_ringo-vfl7vEehF.png) !important;
}

I made it white and black so it works with any colors.

EDIT: The image fetch can take a bit too long so I could change the above to:

background-image: url(https://s.ytimg.com/yts/img/large_play_button_ringo-vfljWXIdx.png) !important;
filter: invert(100%) brightness(300%);

In this case the image will be already loaded because is the same as not hover. Alternatively .ytp-large-play-button.ytp-button.ytp-red2 could have an image from my github and I will use the filter for hover, so I will not rely on YouTube. I will see. The only problem with this though is that the :hover image looks a little smaller but is just an optical illusion.

Considering I have used your code in my youtube themes for a long time this is the most I can do :P

Comments

  • I've updated the style with a new play button. I like what you did with the white/black, especially the creative invert and brightness changes to the default icon. I ended up remaking the play button (just the triangle itself) and embedding it into the style, and setting the background to a solid colour with a border radius to make it look similar to the play button, so it can don the custom colour.

    Thank you for not only reporting the issue, but presenting a solution. I've been so busy lately, I wouldn't have updated it yet were it not for your post. I appreciate it man!
Sign In or Register to comment.