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>
                        </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</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總是跟上最新趨勢的時髦穿搭，齊瀏海、雀斑與雙包包頭的個性造型，吸引了超過百萬的全球追蹤者關注。</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印尼第一期生相當成功，因此也推出了二期生，在二期生當中，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//IzHhpC_bD6g?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子黑野明擔任宣傳大使。樂敦製藥與三得利也皆推出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。除此之外，花生君是另一特別 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>
</div>