JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.3/jquery.colorbox-min.js"></script>
<section id="showBox">
  <section style="height:auto; width: 100%;">
    check this here  check this here check this here check this here check this here check this here check this here check this here check this here check this here check this here
  </section>
  <video>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</section>

CSS

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/

#colorbox,
#cboxOverlay,
#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

#cboxWrapper {
  max-width: none;
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
}

#cboxMiddleLeft,
#cboxBottomLeft {
  clear: left;
}

#cboxContent {
  position: relative;
}

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#cboxTitle {
  margin: 0;
}

#cboxLoadingOverlay,
#cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow {
  cursor: pointer;
}

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
  -ms-interpolation-mode: bicubic;
}

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}

#colorbox,
#cboxContent,
#cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}


/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/

#cboxOverlay {
  background: url(overlay.png) repeat 0 0;
  opacity: 0.5!important;
  filter: alpha(opacity=90);
  background: black;
}

#colorbox {
  outline: 0;
}

#cboxTopLeft {
  width: 21px;
  height: 21px;
  background: url(controls.png) no-repeat -101px 0;
}

#cboxTopRight {
  width: 21px;
  height: 21px;
  background: url(controls.png) no-repeat -130px 0;
}

#cboxBottomLeft {
  width: 21px;
  height: 21px;
  background: url(controls.png) no-repeat -101px -29px;
}

#cboxBottomRight {
  width: 21px;
  height: 21px;
  background: url(controls.png) no-repeat -130px -29px;
}

#cboxMiddleLeft {
  width: 21px;
  background:...

JavaScript

$.colorbox({
  inline: true,
  width: "auto",
  height: "auto",
  href: "#showBox",
  onClosed: function() {
  $.ajax({
                                        url: 'https://www.youtube.com',
                                        contentType: "application/json; charset=utf-8",
                                        dataType: "jsonp"});
                                        
  
  }
});










ssssssssssssssssssss