AI_Video_LP/layouts/partials/vtuber.html

<div id="block-vtuber">
  <section class="sec sec01">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="txt-block">
            <h2>What is VTuber?<br>VTuber 101</h2>
            <p>全名為「Virtual YouTuber」簡稱為「Vtuber」，其意思為「虛擬的」Youtuber。是以虛擬的人物進行Youtube相關的影音創作，藉此讓動畫人物如真正的人一樣生動且真實。</p>
          </div>
        </div>
        <div class="col-md-6">
          <style>
            .embed-container {
              position: relative;
              padding-bottom: 56.25%;
              height: 0;
              max-width: 100%;
              box-shadow: 1px 1px 8px 2px grey;
              border-radius: 1rem;
            }

            .embed-container iframe,
            .embed-container object,
            .embed-container embed {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
          </style>
          <div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1'
              frameborder='0' allowfullscreen></iframe></div>
        </div>
      </div>
    </div>
  </section>
  <section class="row sec sec02">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <style>
            .embed-container {
              position: relative;
              padding-bottom: 56.25%;
              height: 0;
              max-width: 100%;
              box-shadow: 1px 1px 8px 2px grey;
              border-radius: 1rem;
            }

            .embed-container iframe,
            .embed-container object,
            .embed-container embed {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
          </style>
          <div class='embed-container'><iframe src='https://www.youtube.com/embed//9vrkENKrWeA?autoplay=1&mute=1'
              frameborder='0' allowfullscreen></iframe></div>
        </div>
        <div class="col-md-6">
          <div class="txt-block">
            <h2>Top Vtuber</h2>
            <div class="owl-carousel project">
              <ul class="item rankblock">
                <li><span>No1.</span> Kizuna AI</li>
                <li><span>No2.</span> Gawr Gura </li>
                <li><span>No3.</span> Inugami Korone </li>
              </ul>
              <ul class="item rankblock">
                <li>No4. Kizuna AI</li>
                <li>No5. Gawr Gura </li>
                <li>No6. Inugami Korone </li>
              </ul>
              <ul class="item rankblock">
                <li>No7. Kizuna AI</li>
                <li>No8. Gawr Gura </li>
                <li>No9. Inugami Korone </li>
                <li>No10. Inugami Korone </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>