AI_Video_LP/layouts/shortcodes/vtuber.html

<div id="block-vtuber">
    <section class="row 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> 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">
        <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 AI Spokesgirl, 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>
            <img src="/img/browsing.svg" alt="" class='grow_img' width="80">
        </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>