Issues:
1.lpc-lg-outer .lpc-lg-video-cont {
2 text-align: center;
3 display: inline-block;
4 vertical-align: middle;
5 position: relative;
6}
7.lpc-lg-outer .lpc-lg-video-cont .lpc-lg-object {
8 width: 100% !important;
9 height: 100% !important;
10}
11.lpc-lg-outer .lpc-lg-has-iframe .lpc-lg-video-cont {
12 -webkit-overflow-scrolling: touch;
13 overflow: auto;
14}
15.lpc-lg-outer .lpc-lg-video-object {
16 position: absolute;
17 left: 0;
18 right: 0;
19 width: 100%;
20 height: 100%;
21 top: 0;
22 bottom: 0;
23 z-index: 3;
24}
25.lpc-lg-outer .lpc-lg-video-poster {
26 z-index: 1;
27}
28.lpc-lg-outer .lpc-lg-has-video .lpc-lg-video-object {
29 opacity: 0;
30 will-change: opacity;
31 -webkit-transition: opacity 0.3s ease-in;
32 -o-transition: opacity 0.3s ease-in;
33 transition: opacity 0.3s ease-in;
34}
35.lpc-lg-outer .lpc-lg-has-video.lpc-lg-video-loaded .lpc-lg-video-poster,
36.lpc-lg-outer .lpc-lg-has-video.lpc-lg-video-loaded .lpc-lg-video-play-button {
37 opacity: 0 !important;
38}
39.lpc-lg-outer .lpc-lg-has-video.lpc-lg-video-loaded .lpc-lg-video-object {
40 opacity: 1;
41}
42
43@keyframes lpc-lg-play-stroke {
44 0% {
45 stroke-dasharray: 1, 200;
46 stroke-dashoffset: 0;
47 }
48 50% {
49 stroke-dasharray: 89, 200;
50 stroke-dashoffset:
-35px;
51 }
52 100% {
53 stroke-dasharray: 89, 200;
54 stroke-dashoffset:
-124px;
55 }
56}
57@keyframes lpc-lg-play-rotate {
58 100% {
59 -webkit-transform: rotate(360deg);
60 transform: rotate(360deg);
61 }
62}
63.lpc-lg-video-play-button {
64 width: 18%;
65 max-width: 140px;
66 position: absolute;
67 top: 50%;
68 left: 50%;
69 z-index: 2;
70 cursor: pointer;
71 transform: translate(-50%, -50%) scale(1);
72 will-change: opacity, transform;
73 -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
74 -moz-transition: -moz-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
75 -o-transition: -o-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
76 transition: transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
77}
78.lpc-lg-video-play-button:hover .lpc-lg-video-play-icon-bg,
79.lpc-lg-video-play-button:hover .lpc-lg-video-play-icon {
80 opacity: 1;
81}
82
83.lpc-lg-video-play-icon-bg {
84 fill: none;
85 stroke-width: 3%;
86 stroke: #fcfcfc;
87 opacity: 0.6;
88 will-change: opacity;
89 -webkit-transition: opacity 0.12s ease-in;
90 -o-transition: opacity 0.12s ease-in;
91 transition: opacity 0.12s ease-in;
92}
93
94.lpc-lg-video-play-icon-circle {
95 position: absolute;
96 top: 0;
97 left: 0;
98 bottom: 0;
99 right: 0;
100 fill: none;
101 stroke-width: 3%;
102 stroke: rgba(30, 30, 30, 0.9);
103 stroke-opacity: 1;
104 stroke-linecap: round;
105 stroke-dasharray: 200;
106 stroke-dashoffset: 200;
107}
108
109.lpc-lg-video-play-icon {
110 position: absolute;
111 width: 25%;
112 max-width: 120px;
113 left: 50%;
114 top: 50%;
115 transform: translate3d(-50%, -50%, 0);
116 opacity: 0.6;
117 will-change: opacity;
118 -webkit-transition: opacity 0.12s ease-in;
119 -o-transition: opacity 0.12s ease-in;
120 transition: opacity 0.12s ease-in;
121}
122.lpc-lg-video-play-icon .lpc-lg-video-play-icon-inner {
123 fill: #fcfcfc;
124}
125
126.lpc-lg-video-loading .lpc-lg-video-play-icon-circle {
127 animation: lpc-lg-play-rotate 2s linear 0.25s infinite, lpc-lg-play-stroke 1.5s ease-in-out 0.25s infinite;
128}
129
130.lpc-lg-video-loaded .lpc-lg-video-play-button {
131 opacity: 0;
132 transform: translate(-50%, -50%) scale(0.7);
133}