JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script type='text/javascript' id='vidyard_embed_code_SgTfWCfB5jNMp6HP6z3DMJ' src='//play.vidyard.com/SgTfWCfB5jNMp6HP6z3DMJ.js?v=3.1.1&type=lightbox'></script><script type='text/javascript' src="//play.vidyard.com/v0/api.js"></script><script type='text/javascript' src="//play.vidyard.com/v1/progress-events.js"></script><script type='text/javascript'>var listeners = [];function resetListeners() {// Reset any previous listeners to noops:for (var i = 0; i < listeners.length; i ++) {listeners[i] = function() {};}var index = listeners.length;listeners.push(function (result) {console.log(`${result.player.metadata.chapters_attributes[result.chapter].video_attributes.name}: ${result.event}%.`);});VidyardProgressEvents(function(r) { listeners[index](r); }, [1,25,50,75,100]);}resetListeners();$(document).on('click', '.vidyard_tmask,.vidyard_tclose', resetListeners);var video = new Vidyard.player("<PLAYERUUID>");video.on("playerComplete", function() {$('.vidyard_tclose').click();});</script><div class="outer_vidyard_wrapper"><div class="vidyard_wrapper" onclick="fn_vidyard_SgTfWCfB5jNMp6HP6z3DMJ();"><img width="360" src="//play.vidyard.com/SgTfWCfB5jNMp6HP6z3DMJ.jpg?" alt="Video"><div class="vidyard_play_button"><a href="javascript:void(0);"></a></div></div></div>