Feature Request: Slight Design Change for the LBRY Player Embed #3706

New issue

Closed

opened 2020-02-19 06:06:10 +01:00 by MichaelTunnell · 1 comment

MichaelTunnell commented

2020-02-19 06:06:10 +01:00

(Migrated from github.com)

I think the LBRY color is actually quite good overall as a brand choice but it doesnt work for embeds in my opinion because of the high likelihood of clashes with the sites it is embedded on.

However, I did come up with a way to have both LBRY branding and no clashing.

The default embed button should use a transparent black like this:

.file-render__embed .video-js .vjs-big-play-button {
background-color: rgba(0,0,0,0.6);
}

from here you could use the hover effect to apply LBRY branding color.

.file-render__embed .video-js:hover .vjs-big-play-button {
background-color: rgba(var(--color-primary),0.6);
}

GIF Demo of what the change will look like:

I decided I wanted to embed a LBRY video on my site rather than using the YouTube embed but I found an issue. The default color of the Play Button background is using the LBRY brand color and I think it is problematic for the embed because it clashes with my sites. I think the LBRY color is actually quite good overall as a brand choice but it doesnt work for embeds in my opinion because of the high likelihood of clashes with the sites it is embedded on. However, I did come up with a way to have both LBRY branding and no clashing. The default embed button should use a transparent black like this: > .file-render__embed .video-js .vjs-big-play-button { > background-color: rgba(0,0,0,0.6); > } > from here you could use the hover effect to apply LBRY branding color. > .file-render__embed .video-js:hover .vjs-big-play-button { > background-color: rgba(var(--color-primary),0.6); > } GIF Demo of what the change will look like: ![lbry-embed-2020-02-18_23 01 46](https://user-images.githubusercontent.com/1056731/74803582-0e393b00-52a3-11ea-9b31-83439f8f3d33.gif)

kauffj commented

2020-02-20 00:31:24 +01:00

(Migrated from github.com)

@MichaelTunnell thank you! Looks like a fine change. To make a PR, you typically fork the repo then follow these steps: https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork

We can also copy/paste this in, but we encourage PRs so you can receive the credit!

👍 1