ซ้อม

✨ Maiss Mai

<html>
  <head>
    <title>Bangtan Song</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,300&display=swap');
      *{
        margin:0;
        box-sizing:border-box;
      }
      body{
        position:relative;
        background: #e3e3e3;
        font-family: 'Kanit', sans-serif;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        top:15px;
        text-align:center;
      }
      #frame{
        --h:60;
        position:relative;
        width:calc(var(--h) / 10 * 100px);
        height:calc(var(--h) / 10 * 100px);
/*         background:black; */
        overflow:hidden;
/*         left:calc(50vw - (var(--h) / 10 * 100px) / 2); */
/*         top:calc(50vh - (var(--h) / 10 * 100px) / 2); */
        top:20px;
        border-radius:20px;
        box-shadow: 5px 5px 10px #0002;
      }
      #frameCard{
        position:relative;
        width:clac(var(--h) / 10 * 400px);
        height:calc(var(--h) / 10 * 100px);
/*         background:yellow; */
        --i:6;
        top:calc(var(--i) * (var(--h) / 10 * -100px));
      }
      .text {
        position:relative;
        top:40px;
        color:hsl(0, 100%, 100%);
        font-size:calc(var(--h) / 10 * 0.15em);
      }
      .card{
        position:relative;
        width:calc(var(--h) / 10 * 100px);
        height:calc(var(--h) / 10 * 100px);
/*         background:red; */
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        background:#fff8;
      }
      
      .card:nth-child(1){
        background:radial-gradient(hsl(329, 20%, 75%), hsl(329, 20%, 55%));
      }
      .card:nth-child(2){
        background:radial-gradient(hsl(198, 26%, 72%), hsl(198, 26%, 42%));
      }
      .card:nth-child(3){
        background:radial-gradient(hsl(240, 10%, 55%), hsl(240, 10%, 25%));
      }
      .card:nth-child(4){
        background:radial-gradient(hsl(0, 0%, 46%), hsl(0, 0%, 16%));
      }
      .card:nth-child(5){
        background:radial-gradient(hsl(240, 10%, 55%), hsl(240, 10%, 25%));
      }
      .card:nth-child(6){
        background:radial-gradient(hsl(344, 40%, 85%), hsl(344, 40%, 65%));
      }
      .card:nth-child(7){
        background:radial-gradient(hsl(240, 10%, 55%), hsl(240, 10%, 25%));
      }
      .card iframe{
        height:calc(var(--h) / 10 * 50px);
        width:calc(var(--h) / 10 * 50px);
        box-shadow: 10px 10px 20px #2232;
        position:relative;
      }
      h5 {
        color:grey;
        margin-bottom:10px;
      }
      #toggle{
        position:relative;
        width:150px;
        background:#0077ff;
        padding:.5em;
        border-radius:4px;
        cursor:pointer;
        color:white;
        box-shadow: 2px 2px 10px #0002;
      }
    </style>
  </head>
  <body>
    	<br>
      <div id="toggle" onclick="changeMusic()">
        Change Music
      </div>
        <h5>
          <br>
        		*กดปิดเพลงก่อนเปลี่ยนเพลงด้วยจ้า*
        </h5>
    <div>
      <h2>
        Change Size
      </h2>
      <input type="range" min="50" max="65" value="60" id="changeSize" oninput="changeSizeframe()">
    </div>
    <div id="frame">
      <div id="frameCard" data-music="1">
        
        <div class="card">
        	<iframe src="https://www.youtube.com/embed/9mwRYgMmSGE?start=53">
			</iframe>
          <div class="text">
            <h2>
              Answer : Love Myself - BTS (방탄소년단)
            </h2>
            <p>
              <br>
              " ตอนนี้มาให้อภัยตัวเรากันเถอะนะ ชีวิตของเรายืนยาว<br>
              เชื่อใจตัวเองเมื่อต้องอยู่ในเขาวงกต เมื่อฤดูหนาวผ่านพ้น<br>
              ก็จะเป็นเวลาของฤดูใบไม้ผลิเสมอ "
            </p>
          </div>
        </div>
  
        <div class="card">

        	<iframe src="https://www.youtube.com/embed/AArJ_lJGKv0?start=60">
			</iframe>
          <div class="text">
            <h2>
              00:00 - BTS (방탄소년단)
            </h2>
            <p>
              <br>
              " เมื่อเข็มชั่วโมงและนาทีเคลื่อนที่มาตำแหน่งเดียวกัน <br>โลกใบนี้จะหยุดหายใจไปขณะหนึ่งหยุดตรงที่ 00:00 น. <br>แล้วคุณจะมีความสุข "
            </p>
          </div>
        </div>
   
        <div class="card">
        	<iframe src="https://www.youtube.com/embed/obH7iPDAn2Q?start=13">
			</iframe>
          <div class="text">
            <h2>
              Paradise - BTS (방탄소년단)
            </h2>
            <p>
              <br>
              " ไม่เป็นไรนะถ้าจะหยุด ไม่จำเป็นที่จะต้องวิ่งไปโดยที่ไม่รู้เหตุผล<br>
              ไม่เป็นไรนะถ้าจะไม่มีความฝันอะไร ถ้าคุณมีช่วงเวลาที่มีความสุขสักครู่<br>
              ไม่เป็นไรเลยที่จะไม่มีฝัน ทุกลมหายใจของคุณคือการอยู่ในสรวงสวรรค์แล้วนะ "
            </p>
          </div>
        </div>
        
        <div class="card">
        <iframe src="https://www.youtube.com/embed/-YIj6H4ShQA?start=55">
			</iframe>
          <div class="text">
            <h2>
              Lost - BTS (방탄소년단)
            </h2>
            <p>
              <br>
              " การหลงทาง คือการค้นหาเส้นทางของเรา "
            </p>
          </div>
        </div>
  
        <div class="card">
        	<iframe src="https://www.youtube.com/embed/38k5zr1e0HI?start=53">
			</iframe>
          <div class="text">
            <h2>
              Magic Shop - BTS (방탄소년단)
            </h2>
            <p>
              <br>
              " วันที่คุณเกลียดการเป็นตัวเอง วันที่คุณอยากจะหายตัวไปตลอดกาล<br>
              มาสร้างประตูบานหนึ่งในหัวใจของคุณกันเถอะ ถ้าคุณเปิดประตูนั้นออกและก้าวเข้าไป<br>
              สถานที่นี้จะรอคุณอยู่เสมอ เชื่อเถอะ มันจะไม่เป็นไร<br>ผมจะปลอบโยนคุณด้วยร้านเวทมนตร์แห่งนี้ "
            </p>
          </div>
        </div>
  
        <div class="card">
        	<iframe src="https://www.youtube.com/embed/OiMWFojB9Ok">
			</iframe>
          <div class="text">
            <h2>
              Dynamite - BTS (방탄소년단)
            </h2>
            <p>
              <br>
              " Dy-na-na-na, na-na, na-na, ayy<br>
              Dy-na-na-na, na-na, na-na, ayy<br>
              Dy-na-na-na, na-na, na-na, ayy"
            </p>
          </div>
        </div>
  
        <div class="card">
        	<iframe src="https://www.youtube.com/embed/zdLvqiOmWq4?start=92">
			</iframe>
          <div class="text">
            <h2>
              So what? - BTS (방탄소년단)
            </h2>
            <p>
              <br>
              " แม้จะมีเรื่องที่น่ากังวลมากแค่ไหน<br>แม้จะมีคนเข้าใจเรื่องที่เราทำผิดไปบ้างก็ไม่เป็นไร 
              ช่างมันเถอะ<br>ไม่ต้องเก็บเอามาใส่ใจไว้ตลอดก็ได้ มาใช้ชีวิตในแบบของเรากันเถอะ "
            </p>
          </div>
        </div>
  
      </div>
    </div>
    <script>

let sizechange = document.getElementById("frame")
      console.log(sizechange)
      
      function changeSizeframe() {
        changeSize = document.getElementById("changeSize").value;
        console.log(changeSize)
        sizechange.style.setProperty("--h", changeSize)
      }
    </script>
  </body>
</html>