JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div class="show-me">Play Me (single query) <br>?autoplay=1</div>
  <iframe width="420" height="315" source="https://www.youtube.com/embed/MenOmqIBmIM?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
<div class="show-me">Play Me (multiple queries) <br>?rel=0&autoplay=1</div>
  <iframe width="420" height="315" source="https://www.youtube.com/embed/UJ1tBVtYOBc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
<div class="show-me">Play Me (multiple queries) <br>?autoplay=1&rel=0</div>
  <iframe width="420" height="315" source="https://www.youtube.com/embed/unoekCJr6MU?autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>
<div class="show-me">Play Me (multiple queries - doesn't work) <br>?rel=0?autoplay=1</div>
  <iframe width="420" height="315" source="https://www.youtube.com/embed/SjfspM5sDIA?rel=0?autoplay=1" frameborder="0" allowfullscreen></iframe>
<div class="show-me">Play Me (multiple queries - doesn't work) <br>&autoplay=1&rel=0</div>
  <iframe width="420" height="315" source="https://www.youtube.com/embed/Rt6Co7EMNCU&autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>

CSS

body {
  text-align: center;
  background-color: hsla(0, 0%, 80%, 1);
}
iframe {
  display: none;
  margin: 0 auto;
}
.show-me {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  padding: 10px;
  color: hsla(0, 0%, 95%, 1);
  background-color: hsla(0, 0%, 15%, 1);
  cursor: pointer;
}
.show-me:hover {
  background-color: red; 
}

JavaScript

$('.show-me').click(function() {
  $(this).next('iframe').slideToggle();
  	if ($(this).text().match('Play Me')) {
  	  $(this).html('Turn Off');
      var src = $(this).next('iframe').attr('source');
      $(this).next('iframe').attr('src', src);
    } else {
      $(this).html('Play Me');
      $(this).next('iframe').attr('src', '');
    }
});