jQuery addClass example

Change class name on click in jQuery

by Sahil Kashyap

HTML

<link rel="stylesheet" href="https://vjs.zencdn.net/7.4.1/video-js.css">
<script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
<div id="videowrapper">
  <video id="videoplay" class="video-js vjs-default-skin" controls preload="metadata" width="854" height="480" poster="" autoplay="true">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> 
  </video>
</div>



<div id="overlays-wrap">

  <div class="overlay-item" data-overlayid="59" data-time="41">
    <p class="vo-question">
      Welche Zahl ist die Summe bei 3 + 50 = 53?
    </p>

    <div class="vtask-choices-wrap">

      <div class="vtask-choice-item">
        <input class="vtask-choice" type="radio" name="quiz" id="59-a1" value="1" data-correct="0">
        <label class="radio-tile" for="59-a1">
          <span class="radio-tile-label">
            3
          </span>
        </label>
      </div>

      <div class="vtask-choice-item">
        <input class="vtask-choice" type="radio" name="quiz" id="59-a2" data-correct="0">
        <label class="radio-tile" for="59-a2">
          <span class="radio-tile-label">
            50
          </span>
        </label>
      </div>

      <div class="vtask-choice-item">
        <input class="vtask-choice" type="radio" name="quiz" id="59-a3" value="3" data-correct="1"> 
        <label class="radio-tile" for="59-a3">
          <span class="radio-tile-label">
            53
          </span>
        </label>
      </div>


    </div> <!-- vtask-choices-wrap -->

    <a class="buttonb vtask-btn-continue">Continue</a>

  </div> <!-- overlay-item -->

</div>

CSS

body { margin: 0; }

#overlays-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height:460px;
    left: 0;
    top: 0;
    z-index: 2147483647;
}

.overlay-item {
    position: absolute;
    top: 0;
    color: #FFF;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.85);
    width: 100%;
    height: 100%;
    padding: 0;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
}

.overlay-item .vo-question {
    margin: 10px 0 40px 0;
    width: 80%;
    text-align: center;
    line-height: 1.5;
}

.vtask-choices-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
    width: 100%;
    max-width: 1000px;
    min-height: 10rem;
}

.vtask-choice-item .vtask-choice {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.radio-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px solid #079ad9;
    border-radius: 5px;
    padding: 1rem;
    transition: transform 300ms ease;
    background: rgba(0,0,0,0.5);
    z-index: 500;
    cursor: pointer;
    font-size: 18px;
    text-align: center;
}

.vtask-btn-continue {
    color: #FFFFFF!important;
    border-color: #2B78C5;
    border-bottom-color: #2a65a0;
    text-decoration: none;
    text-shadow: none;
    color: #FFF;
    background: #39F;
    margin-top: 40px;
    padding: 10px 20px;
    font-family: Arial,sans-serif;
    font-size: 16px;
}

JavaScript

$(document).ready(function()
                  {

  var options = {
    playbackRates: [1, 1.5, 2],
    muted: true,
  };

  video = videojs('videoplay', options);

  
  video.ready(function() 
              {

		 <!--// Show overlay on Pause event-->
 		 this.on("pause", function(){
			if (!this.seeking() && this.paused()) {
				
  $('#overlays-wrap').appendTo($('#videoplay'));
			}
		 });
    /*
		this.on('fullscreenchange',function() {
			console.log('fullscreen event');
		});
		*/
  }); // end video.ready 


  // OVERLAY PREPARE
  // $('#overlays-wrap, .overlay-item').hide();

  // OVERLAY INTERACTION
  $('.radio-tile').click( function() {
    // only show if not yet submitted, prevents submit then click again on radio-tile which would show the vtask-btn-continue
    var submitted = $(this).closest('.overlay-item').hasClass('overlay-submitted');
    if(!submitted)
    {
      $(this).parent().parent().next('.vtask-btn-continue').css('visibility', 'visible');
      // make sure we check the radio button 
      $(this).prev('.vtask-choice').prop('checked', true);
    }
  });

  $('.vtask-btn-continue').click( function() {
    // hide continue button
    $(this).css('visibility', 'hidden');

    var overlay = $(this).closest('.overlay-item'); // $(this).parent()
    overlay.hide();

  });

}); // END ready