Skip to content

Commit 1769c07

Browse files
mlukacmlukac
committed
video-play-pause-stream changes
1 parent 928178b commit 1769c07

File tree

4 files changed

+340
-147
lines changed

4 files changed

+340
-147
lines changed

‎web/app/video-play-pause-stream/index.html

Lines changed: 59 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,38 @@
55
<link rel="stylesheet" href="../../main.css" />
66
<script type="module" src="../../main.js"></script>
77
<link rel="stylesheet" href="page.css" />
8+
<script src="https://embed.cloudflarestream.com/embed/sdk.latest.js"></script>
89
<script type="module" src="page.js"></script>
910
</head>
1011
<body>
1112
<div id="page">
1213

13-
<div class="video-container">
14+
<div class="video-container vpps-video-play-pause-stream vpps-fit">
1415
<picture>
15-
<source
16+
<!-- <source
1617
media="(orientation: landscape)"
17-
srcset="https://res.cloudinary.com/demo/video/upload/w_1920,h_1080,c_fill/so_0/sea_turtle.jpg">
18+
srcset="https://res.cloudinary.com/demo/video/upload/w_1920,h_1080,c_fill/so_0/sea_turtle.jpg"> -->
1819
<source
1920
media="(orientation: portrait)"
2021
srcset="https://res.cloudinary.com/demo/video/upload/w_640,h_1080,c_fill/so_0/sea_turtle.jpg">
21-
<img src="https://picsum.photos/800/800" alt="Image poster" class="poster">
22+
<img src="https://picsum.photos/640/1080" alt="Image poster" class="poster">
2223
</picture>
2324

24-
<video id="myvideo" preload="none" muted playsinline loop class="video"
25-
onclick="this.paused ? this.play() : this.pause();">
26-
<source class="" src=""
27-
data-src-portrait="https://res.cloudinary.com/demo/video/upload/w_640,h_1080,c_fill/sea_turtle.mp4"
28-
data-src-landscape="https://res.cloudinary.com/demo/video/upload/w_1920,h_1080,c_fill/sea_turtle.mp4"
29-
type="video/mp4">
30-
</video>
31-
<button class="open-fullscreen" onclick="window.openFullscreen(this)">Fullscreen</button>
25+
<iframe
26+
class="vpps-player"
27+
xdata-landscape="https://customer-eqhp6zvrdju5e3bt.cloudflarestream.com/4f99bb5538f1597e9ad82f25b4476a31/iframe?controls=false&loop=true&muted=true"
28+
data-portrait="https://customer-eqhp6zvrdju5e3bt.cloudflarestream.com/b9b49273575faede2e4b09f5f41da487/iframe?controls=false&loop=true&muted=true"
29+
src=""
30+
style="border: none"
31+
height="720"
32+
width="1280"
33+
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
34+
allowfullscreen="true"
35+
></iframe>
36+
<a class="on-hover" href="#"></a>
3237
</div>
3338

34-
<div class="video-container">
39+
<!-- <div class="video-container vpps-video-play-pause-stream vpps-fit">
3540
<picture>
3641
<source
3742
media="(orientation: landscape)"
@@ -42,16 +47,21 @@
4247
<img src="https://picsum.photos/800/800" alt="Image poster" class="poster" width="200px" height="500px">
4348
</picture>
4449
45-
<video preload="none" muted playsinline loop class="video"
46-
onclick="this.paused ? this.play() : this.pause();">
47-
<source class="" src="" width="200px" height="500px"
48-
data-src-portrait="https://assets.mixkit.co/videos/preview/mixkit-waves-in-the-water-1164-large.mp4"
49-
data-src-landscape="https://res.cloudinary.com/jgl-ltd/video/upload/v1642245033/culture_v12_gyekhcibbb.mp4"
50-
type="video/mp4">
51-
</video>
50+
<iframe
51+
class="vpps-player"
52+
data-landscape="https://customer-eqhp6zvrdju5e3bt.cloudflarestream.com/4f99bb5538f1597e9ad82f25b4476a31/iframe?controls=false&loop=true&muted=true"
53+
data-portrait="https://customer-eqhp6zvrdju5e3bt.cloudflarestream.com/b9b49273575faede2e4b09f5f41da487/iframe?controls=false&loop=true&muted=true"
54+
src=""
55+
style="border: none"
56+
height="720"
57+
width="1280"
58+
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
59+
allowfullscreen="true"
60+
></iframe>
61+
<a class="on-hover" href="#"></a>
5262
</div>
5363
54-
<div class="video-container">
64+
<div class="video-container vpps-video-play-pause-stream vpps-fit">
5565
<picture>
5666
<source
5767
media="(orientation: landscape)"
@@ -61,16 +71,22 @@
6171
srcset="https://i.postimg.cc/jszvNhjJ/image-2.png">
6272
<img src="https://picsum.photos/800/800" alt="Image poster" class="poster" width="200px" height="500px">
6373
</picture>
64-
<video preload="none" muted playsinline loop class="video"
65-
onclick="this.paused ? this.play() : this.pause();">
66-
<source class="" src="" width="200px" height="500px"
67-
data-src-portrait="https://assets.mixkit.co/videos/preview/mixkit-portrait-of-a-woman-in-a-pool-1259-large.mp4"
68-
data-src-landscape="https://res.cloudinary.com/jgl-ltd/video/upload/v1642245033/culture_v12_gyekhcibbb.mp4"
69-
type="video/mp4">
70-
</video>
74+
75+
<iframe
76+
class="vpps-player"
77+
data-landscape="https://customer-eqhp6zvrdju5e3bt.cloudflarestream.com/4f99bb5538f1597e9ad82f25b4476a31/iframe?controls=false&loop=true&muted=true"
78+
data-portrait="https://customer-eqhp6zvrdju5e3bt.cloudflarestream.com/b9b49273575faede2e4b09f5f41da487/iframe?controls=false&loop=true&muted=true"
79+
src=""
80+
style="border: none"
81+
height="720"
82+
width="1280"
83+
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
84+
allowfullscreen="true"
85+
></iframe>
86+
<a class="on-hover" href="#"></a>
7187
</div>
7288
73-
<div class="video-container">
89+
<div class="video-container vpps-video-play-pause-stream vpps-fit">
7490
<picture>
7591
<source
7692
media="(orientation: landscape)"
@@ -80,14 +96,20 @@
8096
srcset="https://i.postimg.cc/sjsmJZBH/image-3.png">
8197
<img src="https://picsum.photos/800/800" alt="Image poster" class="poster" width="200px" height="500px">
8298
</picture>
83-
<video preload="none" muted playsinline loop class="video"
84-
onclick="this.paused ? this.play() : this.pause();">
85-
<source class="" src="" width="200px" height="500px"
86-
data-src-portrait="https://assets.mixkit.co/videos/preview/mixkit-womans-feet-splashing-in-the-pool-1261-large.mp4"
87-
data-src-landscape="https://res.cloudinary.com/jgl-ltd/video/upload/v1642245033/culture_v12_gyekhcibbb.mp4"
88-
type="video/mp4">
89-
</video>
90-
</div>
99+
100+
<iframe
101+
class="vpps-player"
102+
data-landscape="https://customer-eqhp6zvrdju5e3bt.cloudflarestream.com/4f99bb5538f1597e9ad82f25b4476a31/iframe?controls=false&loop=true&muted=true"
103+
data-portrait="https://customer-eqhp6zvrdju5e3bt.cloudflarestream.com/b9b49273575faede2e4b09f5f41da487/iframe?controls=false&loop=true&muted=true"
104+
src=""
105+
style="border: none"
106+
height="720"
107+
width="1280"
108+
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
109+
allowfullscreen="true"
110+
></iframe>
111+
<a class="on-hover" href="#"></a>
112+
</div> -->
91113

92114
</div>
93115
</body>

‎web/app/video-play-pause-stream/page.css

Lines changed: 63 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
body {
22
margin: 0;
33
background-color: lightblue;
4-
padding-top: 90vh;
4+
padding-top: 50vh;
5+
}
6+
#page {
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
510
}
611
.video-container {
712
position: relative;
813
margin: 50px;
9-
max-width: 1600px;
14+
max-width: 720px;
1015
}
1116

1217
.poster {
@@ -16,17 +21,67 @@ body {
1621
opacity: 0.35;
1722
}
1823

19-
.video {
24+
iframe {
2025
position: absolute;
2126
top: 0;
2227
left: 0;
2328
width: 100%;
2429
height: 100%;
2530
object-fit: cover;
26-
visibility: hidden;
31+
/* visibility: hidden; */
2732
}
28-
.open-fullscreen {
33+
.on-hover {
2934
position: absolute;
30-
right: 0;
31-
bottom: 0;
32-
}
35+
inset: 0;
36+
z-index: 3;
37+
width: 100%;
38+
height: 100%;
39+
}
40+
41+
42+
.vpps-video-play-pause-stream.vpps-fit.vpps-landscape {
43+
width: 100%; }
44+
.vpps-video-play-pause-stream.vpps-fit.vpps-landscape iframe {
45+
aspect-ratio: 16/9;
46+
width: 100%;
47+
height: 100%; }
48+
49+
.vpps-video-play-pause-stream.vpps-fit.vpps-portrait {
50+
aspect-ratio: 5/7;
51+
position: relative;
52+
overflow: hidden; }
53+
.vpps-video-play-pause-stream.vpps-fit.vpps-portrait iframe {
54+
position: absolute;
55+
inset: -13.5% 0;
56+
width: 100%;
57+
height: 127%; }
58+
59+
.vpps-video-play-pause-stream.vpps-fill {
60+
position: relative;
61+
overflow: hidden;
62+
width: 100vw;
63+
height: 100vh; }
64+
.vpps-video-play-pause-stream.vpps-fill iframe {
65+
position: absolute;
66+
top: 50%;
67+
left: 50%;
68+
width: 100vw;
69+
height: 100vh;
70+
-webkit-transform: translate(-50%, -50%);
71+
transform: translate(-50%, -50%); }
72+
@media (min-aspect-ratio: 16 / 9) {
73+
.vpps-video-play-pause-stream.vpps-fill.vpps-landscape iframe {
74+
/* height = 100 * (9 / 16) = 56.25 */
75+
height: 56.25vw; } }
76+
@media (max-aspect-ratio: 16 / 9) {
77+
.vpps-video-play-pause-stream.vpps-fill.vpps-landscape iframe {
78+
/* width = 100 / (9 / 16) = 177.78 */
79+
width: 177.78vh; } }
80+
@media (min-aspect-ratio: 9 / 16) {
81+
.vpps-video-play-pause-stream.vpps-fill.vpps-portrait iframe {
82+
/* height = 100 * (16 / 9) = 177.78 */
83+
height: 177.78vw; } }
84+
@media (max-aspect-ratio: 9 / 16) {
85+
.vpps-video-play-pause-stream.vpps-fill.vpps-portrait iframe {
86+
/* width = 100 / (16 / 9) = 56.25 */
87+
width: 56.25vh; } }

0 commit comments

Comments
 (0)