video.css

/* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. */
/* SPDX-License-Identifier: MIT-0 */
.player-wrapper {
  width: 90%;
  max-width: 1080px;
  position: relative;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  background: black;
  margin: 20px 0px;
}

#videoPlayer video:focus {
    outline: 0 !important;
}

#videoPlayer .vjs-big-play-button {
    width: 90px !important;
    height: 90px !important;
    border-radius: 60px !important;
    border: none !important;
}

#videoPlayer .vjs-big-play-button span:first-child {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

#videoPlayer .vjs-big-play-button span:first-child:before {
    top: 0 !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
}

#videoPlayer .vjs-control-bar {
    height: 40px !important;
}

#videoPlayer .vjs-icon-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
}

#videoPlayer .vjs-icon-placeholder:before {
    transform: translate(50%, -50%);
    top: 0 !important;
    left: 100% !important;
    width: auto !important;
    height: auto !important;
}

#videoPlayer .vjs-control {
    align-items: center;
}

#videoPlayer .vjs-button:focus {
    outline: 0em !important;
}

#videoPlayer .vjs-remaining-time {
    display: flex;
}

#videoPlayer .vjs-playback-rate-value {
    display: flex;
    align-items: center;
    justify-content: center;
}

#videoPlayer .vjs-playback-rate .vjs-menu {
    margin-bottom: 2.3em;
}

/* hide control bar when pause video */
#videoPlayer.vjs-paused .vjs-control-bar {
    opacity: 0;
}

/* Custom video title */
#videoPlayer .vjs-title-bar {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    
    /*
      By default, do not show the title bar.
    */
    display: none;
    font-size: 2em;
    padding: .5em;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
  
/* 
Only show the title bar after playback has begun (so as not to hide
the big play button) and only when paused or when the user is 
interacting with the player.
*/
#videoPlayer.vjs-paused.vjs-has-started .vjs-title-bar,
#videoPlayer.vjs-user-active.vjs-has-started .vjs-title-bar{
    display: block;
}

.quiz {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 50%;
    height: 50%;
    border-radius: 3em;
    background-color: white;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
}

.quiz-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 1.5em;
    color: black;
    font-size: 1.6em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: auto;
}

.answer-container {
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex:1;
    align-items: flex-end;
    justify-content: flex-end;
}

.question {
    margin: 0.5em 0;
}

.answer {
    border-radius: 2em;
    background-color: aqua;
    margin: 0.2em 0;
    text-align: center;
    width: 100%;
    padding: 0.7em 0.5em;
}

.able {
    cursor: pointer;
}

.able:hover {
    background-color: brown;
}

.correct {
    background-color: greenyellow;
}

.wrong {
    background-color: red;
}

.vjs-emoji {
    left: 20px;
    bottom: 40px;
    background-color:transparent;
    font-size: 30px;
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.vjs-emoji.smile {
    background-image: url("./smile.png");
}