Plyr: Custom Logo

[sparkktv]

Is there a way to put a custom logo or watermark on the video or even in the video controls like youtube does? I would want to add my own logo though for the embeds on my site...

[sampotts]

Yep with CSS would be your best bet. Not something we'd want to bake into the player I don't think

[sparkktv]

I was able to add the logo perfectly. I like the customization-ability of the player.

[lepusmorris]

@sparkktv How did you do?

[sparkktv]

@lepusmorris Custom CSS. The custom CSS has to be on the controls though and then move it into position. Anywhere else and the logo hides behind the player, likely due to z-index.

[vibhi19]

@sparkktv Can You send me The css To put Logo and Increase The size of the Button and Can I put my Logo over Youtube

[vibhi19]

```
.plyr__controls {
background:url(/wp/wp-content/uploads/bank.jpg) 99% 70% no-repeat,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5))!important;
background-size:100px auto,auto!important
}

```

Got it to work

[moh85]

Hello,
Plyr is a great simple player and a watermark is a good feature to add. @vibhi19 solution is fine but the logo will gone when the control panel fades out. Also you can't add text watermark and you have some limits.
So, I find a better way to do this and it will work also on mobile phones and different screen sizes.
This JS/JQuery code will add a div that will be displayed over the video even in full screen mode:

setTimeout(function(){
var html = '<div class="video" style="\
position: absolute;\
top: 0px;\
left: 5px;\
font-size:10px;\
color: #fff;\
z-index:10">My Website Name</div>';
$('.plyr__controls').after(html);
},100);

[guillermo-varela]

Hi everyone, just throwing my two cents here...

Using just CSS I was able to have a custom logo, both always shown and hiding alongside the video player controls, without messing with the audio player.

Always shown

.plyr__video-wrapper::before {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
  content: url('https://test.png');
}

Using that, the image size cannot be changed, so please pick a small image.

Hiding with player controls

.plyr--video .plyr__controls {
  background: url(https://test.png) 99% 0px no-repeat, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))!important;
}

Using that the image size can be changed by adding something like background-size: 70px auto, auto!important;

Hope it helps.

[akbarnoor94]

.plyr__video-wrapper::before {
position: absolute;
top: 5px;
left: 5px;
z-index: 10;
content: '';
height: 30px;
width: 100px;
background: url('https://test.png') no-repeat;
background-size: 100px auto, auto;
}

[syed7861]

.plyr__video-wrapper::before {
position: absolute;
top: 5px;
left: 5px;
z-index: 10;
content: '';
height: 30px;
width: 100px;
background: url('https://test.png') no-repeat;
background-size: 100px auto, auto;
}

WHere to keep this code inside index.html
or some where else

[akbarnoor94]

.plyr__video-wrapper::before {
position: absolute;
top: 5px;
left: 5px;
z-index: 10;
content: '';
height: 30px;
width: 100px;
background: url('https://test.png') no-repeat;
background-size: 100px auto, auto;
}

WHere to keep this code inside index.html
or some where else

inside your css file