AI_Video_LP/layouts/shortcodes/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="position: relative;">
          <img src="https://i.imgur.com/2HjEBt5.png" alt="" width="250px" class="sec-right">
          <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> Gawr Gura / がうる・ぐら</li>
                <li><span>No2.</span> Inugami Korone / 戌神ころね</li>
                <li><span>No3.</span> Usada Pekora / 兎田ぺこら</li>
              </ul>
              <ul class="item rankblock">
                <li><span>No4.</span> Mori Calliope / もりかりおぺ</li>
                <li><span>No5.</span> Shirakami Fubuki / 白上フブキ</li>
                <li><span>No6.</span> Houshou Marine / 宝鐘マリン</li>
              </ul>
              <ul class="item rankblock">
                <li><span>No7.</span> Kiryu Coco / 桐生ココ</li>
                <li><span>No8.</span> Watson Amelia / ワトソン・アメリア</li>
                <li><span>No9.</span> Minato Aqua / 湊あくあ</li>
              </ul>
              <ul class="item rankblock">
                <li><span>No10.</span> Uruha Rushi / 羽るしあ</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="row sec sec03">
    <div class="container">
      <h2>各國 VTuber</h2>
      <div class="row">
        <div class="col-md-12">
          <div class="v-tabs">
            <ul class="v-tabs-nav">
              <li><a href="#tab-1">日本</a></li>
              <li><a href="#tab-2">歐美</a></li>
              <li><a href="#tab-3">印尼</a></li>
              <li><a href="#tab-4">台灣</a></li>
            </ul>
            <div class="v-tabs-stage">
              <div id="tab-1">
                <div class="row">
                  <div class="col-md-7">
                    <div class="txt-block">
                      <h2>Kizuna AI キズナアイ</h2>
                      <p>絆愛（日語：キズナアイ；英語：Kizuna
                        AI）是一個日本虛擬偶像、影音部落客，經營有YouTube頻道「A.I.Channel」和「A.I.Games」，也是公認的第一個虛擬YouTuber，頻道訂閱數超過400多萬。</p>
                    </div>
                  </div>
                  <div class="col-md-5">
                    <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//6IjFyOQUPf8?autoplay=1&mute=1' frameborder='0'
                        allowfullscreen></iframe></div>
                  </div>
                </div>
              </div>
              <div id="tab-2">
                <div class="owl-carousel homepage">
                  <div class="row item">
                    <div class="col-md-7">
                      <div class="txt-block">
                        <h2>Ami Yamato</h2>
                        <p>Ami
                          Yamato是一位來自日本居住在倫敦的女性，影片以Vlog的形式呈現，紀錄她生活的點滴，影片中還經常有真人坐在她的旁邊並進行合作，或是與影星於電視劇中對談，充分融入現實的生活情景中。
                        </p>
                      </div>
                    </div>
                    <div class="col-md-5">
                      <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//9tYxBQbkmCM?autoplay=1&mute=1' frameborder='0'
                          allowfullscreen></iframe></div>
                    </div>
                  </div>
                  <div class="row item">
                    <div class="col-md-7">
                      <div class="txt-block">
                        <h2>Miquela</h2>
                        <p>來自洛杉磯，現年19歲的Lil Miquela便是其中佼佼者。擁有巴西與西班牙血統，Lil
                          Miquela總是跟上最新趨勢的時髦穿搭，齊瀏海、雀斑與雙包包頭的個性造型，吸引了超過百萬的全球追蹤者關注，自2016年在Instagram出道以來，已在全球累積超過160萬追蹤者。
                        </p>
                      </div>
                    </div>
                    <div class="col-md-5">
                      <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//rQkvFXDi8Ic?autoplay=1&mute=1' frameborder='0'
                          allowfullscreen></iframe></div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="tab-3">
                <div class="row">
                  <div class="col-md-7">
                    <div class="txt-block">
                      <h2>Hololive Vtuber 練習生</h2>
                      <p>日本 Vtuber 公司 HoloLive，往全球開始拓展，HoloLive印尼第一期生相當成功，一期生有Airani Iofifteen, AyundaRisu,
                        MoonaHoshinova ，因此也推出了二期生，在二期生當中，PavoliaReine, AnyaMelfissa 及 Kureiji Ollie，其中Kureiji
                        Ollie已達74萬訂閱。</p>
                    </div>
                  </div>
                  <div class="col-md-5">
                    <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//2zc9Cj6ZZN8?autoplay=1&mute=1' frameborder='0'
                        allowfullscreen></iframe></div>
                  </div>
                </div>
              </div>
              <div id="tab-4">
                <div class="row">
                  <div class="col-md-7">
                    <div class="txt-block">
                      <h2>台灣熱議 VTuber</h2>
                      <p>台日混血的杏仁咪嚕，是Yahoo
                        TV所屬的虛擬網紅，遊戲實況、翻唱及直播為主。璐洛洛、粉絲被稱為滷肉肉。設定為DPC研究團隊，開啟的Vtuber培育計畫所誕生的人造人，鳥羽樂奈、整體為貓頭鷹的形象，基調為綠色，米白色的頭髮帶有一點黃色挑染，香草奈若、整體為蠑螈帽子的形象，粉紅色的頭髮，會學國動、學甚麼像甚麼。悠白、設定為來自天空的雲之少女，整體為短髮，頭部帶著雲朵同心圓的金屬家徽，由於外觀因素常被戲稱為蚊香。
                      </p>
                    </div>
                  </div>
                  <div class="col-md-5">
                    <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//2zc9Cj6ZZN8?autoplay=1&mute=1' frameborder='0'
                        allowfullscreen></iframe></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="row sec sec04">
    <div class="container">
      <h2>特殊類型 VTuber</h2>
      <div class="row">
        <div class="col-md-12">
          <div class="d-tabs">
            <ul class="d-tabs-nav">
              <li><a href="#tab2-1">企業</a></li>
              <li><a href="#tab2-2">非人像</a></li>
            </ul>
            <div class="d-tabs-stage">
              <div id="tab2-1">
                <div class="row">
                  <div class="col-md-7">
                    <div class="txt-block">
                      <h2>企業形象VTuber</h2>
                      <p>
                        各企業也紛紛推出VTuber，Netflix推出N子黑野明擔任宣傳大使，可以說英日兩種語言，並且擔任Netflix動畫情報的專員。雅虎擔任也推出兩位虛擬網紅虎妮與杏仁咪魯，樂敦製藥與三得利也皆推出VTuber，茨城縣則由VTuber擔任形象大使。
                      </p>
                    </div>
                  </div>
                  <div class="col-md-5">
                    <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//QIbinFBjJxA?autoplay=1&mute=1' frameborder='0'
                        allowfullscreen></iframe></div>
                  </div>
                </div>
              </div>
              <div id="tab2-2">
                <div class="row">
                  <div class="col-md-7">
                    <div class="txt-block">
                      <h2>非人像玩偶VTuber</h2>
                      <p>風靡全球的三麗鷗招牌萌貓 Hello Kitty，在2018年正式出道，當起了 VTuber，由於 Hello
                        Kitty本身的高人氣，一開台即吸引了上萬人訂閱，目前已有將近三十萬人訂閱。除此之外，花生君是另一特別 VTuber，是個外型特殊的花生，醜中帶可愛的外型，也吸引了十二萬訂閱數。</p>
                    </div>
                  </div>
                  <div class="col-md-5">
                    <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//uwUVb7jPMJo?autoplay=1&mute=1' frameborder='0'
                        allowfullscreen></iframe></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="row sec sec06">
    <img src="https://i.imgur.com/2HjEBt5.png" alt="" width="250px" class="sec06-left">
    <img src="https://i.imgur.com/2932J5G.png" alt="" width="250px" class="sec06-right">
    <div class="container">
      <h2 class="grow-title">How to Promote Your VTuber Channel</h2>
      <p class="grow-txt">ChoozMo support Virtual YouTuber/Influencer digital marketing and fan growth strategy.<br>
        We have a powerful video marketing SEO solution for you.<br>Our ChoozMo AIGV, the new software
        service. It is driven by deep learning and other unique technology and<br>we can even custom virtual
        presenter to say anything! Any language!</p>
      <span class="grow-call">Optimize your VTuber Channel</span>
      <a class="grow-btn"
        href="https://docs.google.com/forms/d/e/1FAIpQLSfmkiBSQn5SZtZ3Wulq2O7D-XtYcf_9mlu35lrJp9Tq-mIa9Q/viewform">Grow
        Fans Now ! </a>
      <div class="sec06-icons">
        <img src="/img/Icon awesome-play.png" alt="" width="15">
        <img src="/img/Group 946.png" alt="" width="15">
        <img src="/img/Group 947.png" alt="" width="20">
      </div>
    </div>
  </section>
  <section class="row sec sec05">
    <div class="container">
      <h2>VTuber製作軟體</h2>
      <div class="row">
        <div class="col-md-12">
          <div class="m-tabs">
            <ul class="m-tabs-nav">
              <li><a href="#tab3-1">免費</a></li>
              <li><a href="#tab3-2">付費</a></li>
            </ul>
            <div class="m-tabs-stage">
              <div id="tab3-1">
                <div class="row">
                  <div class="col-md-7">
                    <div class="txt-block">
                      <h2>VTuber免費製作軟體</h2>
                      <p>現在Vtuber越來越多樣化，想要當Vtuber首先要有工具，這邊介紹3款免費製作VTuber的軟體，VTube
                        Studio、它具有創新功能，例如將道具固定到你的模型以及更多功能，也可以與觀眾一起玩樂。wakaru是個簡單易用的Vtuber工具，你只有要webcam，或是利用手機鏡頭，
                        配合OBS使用，馬上就可以成為Vtuber！VTuber Maker
                        、是一款，專注於極簡即用的VTuber直播軟體，僅僅只需要一個攝像頭，就能免費、簡單使用的3D工具。這些工具幫助你、跨出Vtuber的第一步。</p>
                    </div>
                  </div>
                  <div class="col-md-5">
                    <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//6JVBDIM7zac?autoplay=1&mute=1' frameborder='0'
                        allowfullscreen></iframe></div>
                  </div>
                </div>
              </div>
              <div id="tab3-2">
                <div class="row">
                  <div class="col-md-7">
                    <div class="txt-block">
                      <h2>VTuber付費製作軟體</h2>
                      <p>付費的工具，讓你的角色更精緻。FaceRig、支持數字動作表情，語音調整，也可以訂自特殊角色。SUVA、支持數字觸發表情，如果沒有硬體、僅能追蹤頭部與眼睛。VDRAW
                        是一個可將你在電腦上所做的任何工作表達為虛擬角色活動，不僅可以做插畫，還可以做遊戲、3D建模、編程、DTM等。</p>
                    </div>
                  </div>
                  <div class="col-md-5">
                    <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//47lmIQebSck?autoplay=1&mute=1' frameborder='0'
                        allowfullscreen></iframe></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>