Plyr io custom

Plyr io custom

by yasemin CerrahoÄźlu

HTML

<link rel="stylesheet" href="https://cdn.plyr.io/1.3.7/plyr.css">
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.7/plyr.css">
<script src="https://cdn.plyr.io/2.0.7/plyr.js"></script>
<script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script type="text/javascript" src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<div class="container">
  <video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin>
    <!-- Video files -->
    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">

    <!-- Text track file -->
    <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>

    <!-- Fallback for browsers that don't support the <video> element -->
    <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
  </video>
</div>

SCSS

/* This is purely for the demo */
.container {
  max-width: 800px;
  margin: 0 auto;
}
.plyr {
  border-radius: 4px;
  margin-bottom: 15px;
}


.brandOwner {
position:absolute;
top:0;
right:0;
color:#fff;
padding:5px 5px 20px;
text-align:right;
}
.textLink {
position:absolute;
top:0;
left:0;
color:#fff;
padding:5px 5px 20px;
}


/*.plyr--hide-controls .title {
    opacity: 0;
    pointer-events: none;
}
.plyr--hide-controls .button {
    opacity: 0;
    pointer-events: none;
}
.plyr {
  font-family: "Avenir Next";
}
.title{font-family:arial}
/* This is purely for the demo */


$progress-color__op1: #50AAAA;
$progress-color__op2: #068587;
$progress-color__op3: #F2B134;
$progress-color__op4: #CBB1A8;
$progress-color__op5: #ED553B;
$shape-round__op1: 0px;
$shape-round__op2: 10px;
$shape-round__op3:100%;
.plyr *:focus {
    outline: 0;
}
.plyr__play-large {
    cursor: pointer;
}
.plyr__progress--played, .plyr__volume--display{
  color:$progress-color__op3;
}
.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large, .plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover, button.plyr__link, {
  background: $progress-color__op3;
  border-radius: $shape-round__op2;
}
.plyr__controls button{
  
  border-radius: $shape-round__op2;
}
button.plyr__play-large:hover{
    box-shadow: 0 0 0px 20px $progress-color__op3;
    outline: 0;
    border-radius: $shape-round__op3;
}
.brandOwner {
position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    text-shadow: 0 0 10px #000000;
    background: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0));
    width: 100%;
    padding: 5px;
}

JavaScript

/*var player;
	player = plyr.setup()[0];
*/


var controls = ["<div class='brandOwner'>",
  "Publisher brand img",
  "</div>",
  "<button type='button' data-plyr='play' class='plyr__play-large' aria-label='Play, View From A Blue Moon - Official Trailer (4K Ultra HD) - John Florence'>",
  "<svg><use xlink:href='#plyr-play'></use></svg>",
  "<span class='plyr__sr-only'>Play</span></button>",
  "<div class='textLink'>",
  "<a href='#' class='plyr__link'>link</a>",
  "</div>",
  "<div class='plyr__controls'>",
  "<button type='button' data-plyr='play'>",
  "<svg><use xlink:href='#plyr-play'></use></svg>",
  "<span class='plyr__sr-only'>Play</span>",
  "</button>",
  "<button type='button' data-plyr='pause'>",
  "<svg><use xlink:href='#plyr-pause'></use></svg>",
  "<span class='plyr__sr-only'>Pause</span>",
  "</button>",
  "<span class='plyr__time'>",
  "<span class='plyr__sr-only'>Current time</span>",
  "<span class='plyr__time--current'>00:00</span>",
  "</span>",
  "<span class='plyr__progress'>",
  "<label for='seek{id}' class='plyr__sr-only'>Seek</label>",
  "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.1' value='0' data-plyr='seek'>",
  "<progress class='plyr__progress--played' max='100' value='0' role='presentation'></progress>",
  "<progress class='plyr__progress--buffer' max='100' value='0'>",
  "<span>0</span>% buffered",
  "</progress>",
  "<span class='plyr__tooltip'>00:00</span>",
  "</span>",
  "<span class='plyr__time'>",
  "<span class='plyr__sr-only'>Duration</span>",
  "<span class='plyr__time--duration'>00:00</span>",
  "</span>",
  "<button type='button' data-plyr='mute'>",
  "<svg class='icon--muted'><use xlink:href='#plyr-muted'></use></svg>",
  "<svg><use xlink:href='#plyr-volume'></use></svg>",
  "<span class='plyr__sr-only'>Toggle Mute</span>",
  "</button>",
  "<span class='plyr__volume'>",
  "<label for='volume{id}' class='plyr__sr-only'>Volume</label>",
  "<input id='volume{id}'...