JSFiddle - React, Tailwind, and code Playground

by hyunkikim

HTML

<button class="open">Display video</button>
<div class="hidden">
  <video>
    <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4">
  </video>
</div>

CSS

.showing {
    display: block;
    background: red;
    padding-left: 200px;
  }
  .hidden {
    display: none;
  }

JavaScript

const open = document.querySelector(".open")
  const close = document.querySelector(".close")
  const viewBox = document.querySelector("div")
  const video = document.querySelector("video")
  
  // Display video 버튼을 클릭하면 viewBox가 보인다.
  open.addEventListener("click", () => viewBox.setAttribute("class", "showing"))
  
  // viewBox를 클릭하면(빨간색 영역) viewBox가 사라진다.
  viewBox.addEventListener("click", () => viewBox.setAttribute("class", "hidden"))
 
  
  // video를 클릭하면 video가 재생된다.
  video.addEventListener("click", (event) => { 
   video.play()
  })