JSFiddle - React, Tailwind, and code Playground

by 25058214

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.js"></script>
<div class="fn__video_wrapper">
  <div class="fn__video_listing">
  <div class="fn__video_player">
    <div class="fn_player">
    
      <div id="lesson_1" class="fn__video__py" data-id="64638356650" style="display: block;">
      
        
        
        <div style="">
  <div class="vidyard-player-container" uuid="H7rZfWpwKzUJS5wMXmgzRQ" style="margin: auto; width: 100%; height: auto; overflow: hidden; display: block; max-width: 1920px; max-height: 1080px;"><div class="vidyard-div-H7rZfWpwKzUJS5wMXmgzRQ" role="none" aria-label="Vidyard media player" style="position: relative; padding-bottom: 56.25%; height: 0px; overflow: hidden; max-width: 100%; background-color: transparent;"><div class="vidyard-inner-container-H7rZfWpwKzUJS5wMXmgzRQ" style="position: absolute;height: 100%; width: 100%; max-width: 1920px; max-height: 1080px; " data-pl="false"> <iframe allow="autoplay; fullscreen; picture-in-picture; camera; microphone; display-capture" allowfullscreen="" allowtransparency="true" referrerpolicy="no-referrer-when-downgrade" aria-label="Vidyard video player" class="vidyard-iframe-H7rZfWpwKzUJS5wMXmgzRQ" frameborder="0" height="100%" width="100%" scrolling="no" src="https://play.vidyard.com/H7rZfWpwKzUJS5wMXmgzRQ?disable_popouts=1&amp;v=4.2.30&amp;viral_sharing=0&amp;embed_button=0&amp;hide_playlist=1&amp;color=FFFFFF&amp;playlist_color=FFFFFF&amp;play_button_color=2A2A2A&amp;gdpr_enabled=1&amp;type=inline&amp;autoplay=0&amp;loop=0&amp;muted=0&amp;hidden_controls=0&amp;pomo=2" title="Vidyard video player" style="opacity: 1;background-color: transparent;position: absolute;top: 0px;left: 0px;/* clip: rect(1px,1px,1px,1px); */"></iframe><img class="vidyard-player-embed inserted" src="https://play.vidyard.com/H7rZfWpwKzUJS5wMXmgzRQ.jpg" width="1920" height="1080" style="display: none; max-width: 100%; margin:...

CSS

.fn__video__py{
  width:350px;
  height:200px;
}
.fn__video_btn{
  cursor:pointer;
  padding:10px;
  margin-bottom:2px;
}

JavaScript

var tabContent = $(".fn__video__py");
  var tabContentActive = $(".fn__video__py.active");
	var tabs = $(".fn__video_wrapper .lessons .fn__video_btn");
	var hash = window.location.hash;
   

  if (hash == ""){
    var hash = "#lesson_1"
  }

  
	tabContent.not(hash).hide();
	tabContent.has(hash).addClass('active');
  var activeBtn = '.fn__video_btn' + hash;
  var activeTab = '.fn__video__py' + hash;
  $(activeBtn).addClass('active');
  $(activeTab).addClass('active');
  console.log(activeBtn);
  console.log(activeTab);
  
	$(".fn__video_wrapper .lessons .fn__video_btn").click(function(event){
    event.preventDefault();
    var index = $(this).index();
    $('.fn__video_wrapper .fn__video_listing .fn__video__py').eq(index).fadeIn();
    $('.fn__video_wrapper .fn__video_listing .fn__video__py').not(':eq('+index+')').hide();
    $(this).addClass('active');
    $(this).siblings('.fn__video_btn.active').removeClass('active');
    history.pushState(null, null, $(this).attr('data-target'));
    //window.location.hash = $(this).attr('data-target');
	});