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> Kizuna AI</li>
                                <li><span>No2.</span> Gawr Gura </li>
                                <li><span>No3.</span> Inugami Korone </li>
                            </ul>
                            <ul class="item rankblock">
                                <li><span>No4.</span> Kizuna AI</li>
                                <li><span>No5.</span> Gawr Gura </li>
                                <li><span>No6.</span> Inugami Korone </li>
                            </ul>
                            <ul class="item rankblock">
                                <li><span>No7.</span> Kizuna AI</li>
                                <li><span>No8.</span> Gawr Gura </li>
                                <li><span>No9.</span> Inugami Korone </li>
                            </ul>
                            <ul class="item rankblock">
                                <li><span>No10.</span> Inugami Korone </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>