9/25/2018 - 8:00 AM



body {
  background-color: white;

.container {
  margin: 0px auto;
  padding: 10px;
  width: 480px;
  background-color: indigo;
  border: 4mm ridge rgb(50, 25, 60, 0.6);

button {
  background-color: indigo;
  color: white;
  border-radius: 10%;
  box-shadow: 5px 5px 3px grey;
  padding: 10px;
  cursor: pointer;

button:hover {
  background-color: white;
  color: indigo;
  border: 0.2mm solid indigo;

.controlpanel {
  transition: all 0.8s;
  margin: 35px 15px 0px 15px;
  border: 2px solid;
  padding: 20px;
  background-color: #d2c8d6;

.controlpanel:hover {
  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
  transform: scale(1.12);

.title {
  float: left;
  padding: 3px 10px 0px 10px;
  margin: -50px 0 0 0px;
  background-color: #f2f3f4;
  font-family: "Great Vibes", cursive;
  font-size: 1.8em;
  color: indigo;
  color: indigo;
  border: 0.2mm solid indigo;
myvideo = document.querySelector("#myvideo");
function playVideo() {;
function pauseVideo() {
function stopVideo() {
function rewindVideo() {
  myvideo.currentTime = 0;


A Pen by Pan Doul on CodePen.


<meta name="description" content="My Video Player">
  <meta charset="utf-8">
  <link href="" rel="stylesheet">
  <title>JS Bin</title>
  <section class="container">
   <video id="myvideo" width="480" height="270">
  <source src="" type="video/mp4">
Your browser does not support the video tag.
<div class="controlpanel"> 
  <div class="title">Control Panel</div>
  <button onclick="playVideo();"><b>Play</b></button>

<button onclick="pauseVideo();">Pause</button>
<button onclick="stopVideo();">Stop</button>
<button onclick="rewindVideo();">
  Back to beginning</button>