<!DOCTYPE html>
<html lang="{{site.dist.country_lang }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta property="og:locale" content="{{site.dist.country_lang | replace: '-', '_' }}" />
<meta name="author" content="Mietubl">
<meta name="description" content="{{ page.seo_description | strip_html| strip_newlines }}">
<meta name="keywords" content="{{page.seo_keywords}}">
<title>{{page.seo_title}}</title>
{% include '_header_css.liquid' %}
</head>
<body>
<!-- MAIN WRAPPER -->
<div class="body-wrap shop-default shop-cards shop-tech">
<div id="st-container" class="st-container">
<div class="st-pusher">
<div class="st-content">
<div class="st-content-inner">
<!-- HEADER -->
{% include '_header.liquid' %}
<!-- END: HEADER -->
<!-- BREADCRUMB -->
<section class="slice sct-color-1">
<div class="container">
<div class="page-title">
<div class="row align-items-center">
<div class="d-flex justify-content-end col-lg-12 col-12">
{% for breadcrumb in breadcrumbs %}
<h2 class="heading heading-6 text-capitalize strong-500 mb-0">
<a href="{{ breadcrumb.url }}" class="link text-underline--none">
{% if forloop.index == 1 %}
<!-- 第一个 breadcrumb 使用 ion-ios-home 图标 -->
<i class="ion-ios-home"></i>
{% else %}
<!-- 其它 breadcrumb 使用 ion-ios-arrow-forward 图标 -->
<i class="ion-ios-arrow-forward"></i>
{% endif %}
{{ breadcrumb.name }}
</a>
</h2>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
<!-- END: BREADCRUMB -->
<section class="slice sct-color-1">
<div class="container">
<div class="block block-post">
<div class="block-body block-post-body">
<h1>
{{ video.title | raw }}
</h1>
<div class="d-flex justify-content-center">
<div style="position: relative; width: 90%; padding-top: 56.25%;"> <!-- 16:9 ratio -->
<iframe
src="{{ video.video_url | raw }}"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
></iframe>
</div>
</div>
</div>
<!-- Comment form -->
</div>
</div>
</section>
{{ page.page_type }}
{% if page.page_type == 0 %}
<section class="slice sct-color-1">
<div class="container">
<div class="pt-5">
<nav aria-label="Product pagination">
<ul class="pagination pagination--style-2 justify-content-center">
<!-- Previous Page Link -->
{% if paginator.previous_page %}
<li class="page-item">
<a class="page-link" href="{{ paginator.previous_page_url }}" tabindex="-1">Previous</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
{% endif %}
<!-- Next Page Link -->
{% if paginator.next_page %}
<li class="page-item">
<a class="page-link" href="{{ paginator.next_page_url }}">Next</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#">Next</a>
</li>
{% endif %}
</ul>
</nav>
</div>
</div>
</section>
{% endif %}
<!-- FOOTER -->
{% include '_footer.liquid' %}
</div>
</div>
</div><!-- END: st-pusher -->
</div><!-- END: st-container -->
</div><!-- END: body-wrap -->
<a href="#" class="back-to-top btn-back-to-top"></a>
{% include '_footer_js.liquid' %}
<!-- Isotope -->
<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/isotope.min.js"></script>
<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/imagesloaded.pkgd.min.js"></script>
<!-- Deso Slide -->
<script src="{{ site.image_base_url }}static/tpl/tech_vista/js/jquery.desoslide.min.js"></script>
<script>
$('#slideshow').desoSlide({
thumbs: $('#slideshow_thumbs .swiper-slide > a'),
thumbEvent: 'click',
first: 0,
effect: 'none',
overlay: 'none',
controls: {
show: false,
keys: false
},
});
</script>
</body>
</html>