JSFiddle - React, Tailwind, and code Playground

by I Sang Hyeon

HTML

<div id="start">
  <video id="vnext" muted autoplay>
    <source src="D:\test\002.mp4" type="video/mp4">
    <strong>Your browser does not support the video tag.</strong>
  </video>
  <div class="start-text">
    <h1>제목</h1>
    <p> department of computer software</p>
    <form>
      <input type="text" id="serch" placeholder="Serch Q&A, notice, community.." maxlength="10" required autofocus>
    </form>
  </div>
</div>

CSS

#start video
{
    max-width: 100%;
    z-index: 1;
}

.start-text > h1
{
    text-align:center;
    /*font-weight: normal;*/
    font-size: 50px;
    color: honeydew;
    margin-bottom: 10px;
}

JavaScript

$(document).ready(function(){
  $("#vnext").on("ended", function() {
    $("#vnext").attr("src", "D:\test\003.mp4");
    $("start-text").css("opacity", "0");
    $("start-text").css("visibility", "visible");
  });
});