The Owly Player

Embed YouTube videos on your website with a custom player.

Start Now

Please, donate to keep this project alive :D

Donate

Designer tool

Preview colors Generate code

* The YouTube ID is missing

* The Custom Image URL is missing

Head code

Paste this code immediately before the closure </head> tag:

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theowly/owlyplayer@main/owlyplayer-v1.0.css">

<style>
  :root{
      --plyr-color-main: ;
      --plyr-video-control-color: ;
      --plyr-video-control-color-hover: ;
  }
</style>

Video code

Additionally, paste this code where you want to put the video:

<div class="owlyplayer-wrapper">
  <div class="owlyplayers">
    <iframe
      src="https://www.youtube.com/embed/?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
      allowfullscreen
      allowtransparency
      allow="autoplay"
    ></iframe>
    
    <div class="owlyplayer-ytblockers" style="background-image: url('');"></div>
  </div>
</div>

Final code

Finally, paste this code immediately before the closure </body> tag:

<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
<script src="https://cdn.jsdelivr.net/gh/theowly/owlyplayer@main/owlyplayer-v1.0.js"></script>

The Owly 2022

Created by RAM ALF