Hyperlink URL Watermark (Logo)

[sizzlingkenny]

I was looking for Watermark (Logo) url options but I couldn't find it, even have tried various options to enable it but nothing worked, how may I add hyperlink to the watermark image inside the player so any one can visit my site by clicking the logo within the player just like VideoJS.

thanks

[transiscodev]

Can you be more specific? I don't see any references to code for watermark logos in the dist. Can you link a code pen or explain how you got the logo on there to begin with? Making it a hyperlink should be easy enough, but I don't understand how you implemented a logo/watermark to begin with.

[sizzlingkenny]

I am able to put logo watermark using CSS piece of code

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

Now the logo watermark shows in the player but its not clickable, It would be nice to have hyperlink over that image so any one can click the logo and visit my site if my player is embedded on other websites.

[transiscodev]

I’ll check this with my own code and see what the Xpath of the element is

[transiscodev]

I haven't found a way to make this work. The primary issue is that the if .plyr__controls was completely clickable, it would fire on the other buttons. The image is primarily in the padding of .plyr__controls actually, so that's another problem. Seperating the image from the background by transparency must be done by hand and still, that involves using map, which is not compatible with DIV backgrounds (only IMG). I will poke around with using the entire padding, but keep in mind it will fire on the other side of the video player. To get a sense of what I mean, pull up Developer Tools in your browser, select <div class="plyr__controls"> and use the element inspector tool to highlight it. You will see what is element and what is padding. It will also show in the position map in Chrome & Edge.

[transiscodev]

https://codepen.io/transiscodev/pen/dyGbGZp is a very incomplete sandbox of my testing

[ajtatum]

I just wanted to mention that I was looking for this option as I really, really like Plyr but for embedding I end up leaning towards FluidPlayer, which I honestly don't like as much except for the ability to have my logo (or an advertisers logo for that matter) positioned on the top left corner. It would be sweet if Plyr could introduce this feature so that I can use the same player for both my embed page and non-embedded pages.

[sadevID]

You can view my watermark on my web https://saplay.ml