1<div class="row">
2 <div class="col-12 col-md-6">
3 <div class="sp-content" data-aos="zoom-in" data-aos-once="true">
4 <h2 class="sp-title">${.vars['reserved-article-title'].data}</h2>
5 <p class="sp-desc">${desc.getData()}</p>
6 </div>
7 </div>
8 <div class="col-12 col-md-6">
9 <div class="sp-overlay"></div>
10 <div id="parent-study-video" class="sp-img" data-aos="zoom-in" data-aos-once="true">
11 <div class="sp-video-study">
12 <div class="sp-img-study imageFilter">
13 <div class="background" style="background-image: url('${video.img.getData()}')"></div>
14 <div class="foreground">
15 <video id="study-video" class="sp-img-study" poster="${video.img.getData()}" preload="none">
16 <source id="sp-source" src="${video.getData()}" type="video/mp4">
17 </video>
18 </div>
19 </div>
20 <a id="btn-toggle-video" class="sp-play" href="javascript:void(0)">
21 <img src="/o/shu-theme/images/svg/play-button.svg"/>
22 </a>
23 <a class="sp-readmore" href="${title.url.getData()}">${title.getData()}</a>
24 </div>
25 </div>
26 </div>
27</div>
28<script>
29
30var myVideo = document.getElementById("study-video");
31var btnElement = document.getElementById("btn-toggle-video");
32var ParentMyVideo = document.getElementById("parent-study-video");
33
34btnElement.addEventListener("click", function() {
35 if (myVideo.paused) {
36 myVideo.play();
37 myVideo.controls = true;
38
39 if (typeof btnElement.classList !== "undefined" || btnElement.classList !== null ) {
40 ParentMyVideo.classList.add("active-video");
41 }
42 }
43});
44</script>
45
46<style>
47.sp-study .sp-img .sp-img-study {
48 object-fit: contain;
49}
50
51.imageFilter {
52 position: relative;
53 overflow: hidden;
54 z-index: 0;
55}
56
57.imageFilter .background {
58 position: absolute;
59 left: -5px;
60 right: -5px;
61 top: -5px;
62 bottom: -5px;
63 z-index: 1;
64 /* background-attachment: fixed !important; */
65 background-position: center center !important;
66 background-size: cover !important;
67 /* height: 100%; */
68 filter: blur(5px);
69}
70
71.imageFilter .background::after {
72 content: "";
73 position: absolute;
74 left: 0;
75 right: 0;
76 top: 0;
77 bottom: 0;
78 background: rgba(0, 0, 0, 0.1);
79 z-index: 2;
80}
81
82.imageFilter .foreground {
83 object-fit: contain;
84 object-position: 50% 50%;
85 width: 100%;
86 height: 100%;
87 position: relative;
88 z-index: 3;
89 display: flex;
90}
91
92.imageFilter .foreground .img {
93 display: block;
94 max-width: 100%;
95 max-height: 100%;
96 margin: auto;
97}
98</style>
