plyr io controls

by yasemin CerrahoÄźlu

HTML

<link rel="stylesheet" href="https://cdn.plyr.io/2.0.7/plyr.css">
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.7/demo.css">
<script src="https://cdn.plyr.io/2.0.7/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/1.3.7/plyr.css">
<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;
}
.title {
position:absolute;
top:0;
left:0;
color:#fff;
padding:20px;
}
.button {
position:absolute;
top:0;
right:0;
color:#fff;
padding: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;
}
.title {
position: absolute;
    top: 0;
    left: 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

//following defines the custom controls html.  note the first two divs are not standard, but are included to take advantage of the control hiding
var controls = ["<div class='brand'>",
					"This is brand img",
				"</div>",
	"<div class='button'>",
		"<button type='button' class='btn btn-secondary'>This is a button</button>",
	"</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}'...