| 1 |
<?php |
| 2 |
$id = wp_unique_id( 'vbbVideoBG-' ); |
| 3 |
|
| 4 |
extract( $attributes ); |
| 5 |
|
| 6 |
if ( ! function_exists( 'vbb_has_space_value' ) ) { |
| 7 |
function vbb_has_space_value( $space ) { |
| 8 |
if ( empty( $space ) || ! is_array( $space ) ) { |
| 9 |
return false; |
| 10 |
} |
| 11 |
$keys = [ 'vertical', 'horizontal', 'top', 'right', 'bottom', 'left' ]; |
| 12 |
foreach ( $keys as $key ) { |
| 13 |
if ( ! empty( $space[ $key ] ) ) { |
| 14 |
return true; |
| 15 |
} |
| 16 |
} |
| 17 |
return false; |
| 18 |
} |
| 19 |
} |
| 20 |
|
| 21 |
if ( ! function_exists( 'vbb_resolve_space' ) ) { |
| 22 |
function vbb_resolve_space( $space, $fallback ) { |
| 23 |
return vbb_has_space_value( $space ) ? $space : $fallback; |
| 24 |
} |
| 25 |
} |
| 26 |
|
| 27 |
if ( ! function_exists( 'vbb_extract_youtube_id' ) ) { |
| 28 |
function vbb_extract_youtube_id( $url ) { |
| 29 |
if ( empty( $url ) ) { |
| 30 |
return ''; |
| 31 |
} |
| 32 |
if ( strpos( $url, 'youtu.be/' ) !== false ) { |
| 33 |
$parts = explode( 'youtu.be/', $url ); |
| 34 |
return explode( '?', end( $parts ) )[0]; |
| 35 |
} |
| 36 |
$parsed = wp_parse_url( $url ); |
| 37 |
if ( ! empty( $parsed['query'] ) ) { |
| 38 |
parse_str( $parsed['query'], $query ); |
| 39 |
if ( ! empty( $query['v'] ) ) { |
| 40 |
return $query['v']; |
| 41 |
} |
| 42 |
} |
| 43 |
if ( ! empty( $parsed['path'] ) && strpos( $parsed['path'], '/embed/' ) !== false ) { |
| 44 |
$parts = explode( '/embed/', $parsed['path'] ); |
| 45 |
return end( $parts ); |
| 46 |
} |
| 47 |
return ''; |
| 48 |
} |
| 49 |
} |
| 50 |
|
| 51 |
if ( ! function_exists( 'vbb_extract_vimeo_id' ) ) { |
| 52 |
function vbb_extract_vimeo_id( $url ) { |
| 53 |
if ( empty( $url ) ) { |
| 54 |
return ''; |
| 55 |
} |
| 56 |
$parsed = wp_parse_url( $url ); |
| 57 |
$path = $parsed['path'] ?? ''; |
| 58 |
$segments = array_values( array_filter( explode( '/', $path ) ) ); |
| 59 |
$segments = array_reverse( $segments ); |
| 60 |
foreach ( $segments as $seg ) { |
| 61 |
if ( ctype_digit( $seg ) ) { |
| 62 |
return $seg; |
| 63 |
} |
| 64 |
} |
| 65 |
return ''; |
| 66 |
} |
| 67 |
} |
| 68 |
|
| 69 |
if ( ! function_exists( 'vbb_build_youtube_embed' ) ) { |
| 70 |
function vbb_build_youtube_embed( $url, $no_cookie = true ) { |
| 71 |
$id = vbb_extract_youtube_id( $url ); |
| 72 |
if ( ! $id ) { |
| 73 |
return ''; |
| 74 |
} |
| 75 |
$base = $no_cookie ? 'https://www.youtube-nocookie.com/embed/' : 'https://www.youtube.com/embed/'; |
| 76 |
$params = 'autoplay=1&mute=1&loop=1&controls=0&playsinline=1&modestbranding=1&rel=0&playlist=' . $id; |
| 77 |
return $base . $id . '?' . $params; |
| 78 |
} |
| 79 |
} |
| 80 |
|
| 81 |
if ( ! function_exists( 'vbb_build_vimeo_embed' ) ) { |
| 82 |
function vbb_build_vimeo_embed( $url ) { |
| 83 |
$id = vbb_extract_vimeo_id( $url ); |
| 84 |
if ( ! $id ) { |
| 85 |
return ''; |
| 86 |
} |
| 87 |
return 'https://player.vimeo.com/video/' . $id . '?autoplay=1&muted=1&loop=1&background=1&dnt=1'; |
| 88 |
} |
| 89 |
} |
| 90 |
|
| 91 |
$vbb_css = function( $prop, $val ) { |
| 92 |
if ( $val === '' || $val === null ) { |
| 93 |
return ''; |
| 94 |
} |
| 95 |
return $prop . ': ' . $val . ';'; |
| 96 |
}; |
| 97 |
|
| 98 |
$videoSources = $videoSources ?? []; |
| 99 |
$posterSources = $posterSources ?? []; |
| 100 |
$posterOptions = $posterOptions ?? []; |
| 101 |
|
| 102 |
if ( ! is_array( $video ) && is_string( $video ) ) { |
| 103 |
$video = [ 'id' => null, 'url' => $video, 'alt' => '', 'title' => '' ]; |
| 104 |
} |
| 105 |
if ( ! is_array( $poster ) && is_string( $poster ) ) { |
| 106 |
$poster = [ 'id' => null, 'url' => $poster, 'alt' => '', 'title' => '' ]; |
| 107 |
} |
| 108 |
|
| 109 |
if ( empty( $videoSources['desktop']['mp4']['url'] ) && ! empty( $video['url'] ) ) { |
| 110 |
$videoSources['desktop']['mp4'] = [ |
| 111 |
'id' => $video['id'] ?? null, |
| 112 |
'url' => $video['url'] ?? '', |
| 113 |
'alt' => $video['alt'] ?? '', |
| 114 |
'title' => $video['title'] ?? '' |
| 115 |
]; |
| 116 |
} |
| 117 |
if ( empty( $posterSources['desktop']['url'] ) && ! empty( $poster['url'] ) ) { |
| 118 |
$posterSources['desktop'] = [ |
| 119 |
'id' => $poster['id'] ?? null, |
| 120 |
'url' => $poster['url'] ?? '', |
| 121 |
'alt' => $poster['alt'] ?? '', |
| 122 |
'title' => $poster['title'] ?? '' |
| 123 |
]; |
| 124 |
} |
| 125 |
|
| 126 |
if ( ! is_array( $bgOverlay ) ) { |
| 127 |
$bgOverlay = is_string( $bgOverlay ) ? [ 'color' => $bgOverlay ] : [ 'color' => '#000000b3' ]; |
| 128 |
} |
| 129 |
$contentTypography = $contentTypography ?? []; |
| 130 |
$headingTypography = $headingTypography ?? []; |
| 131 |
$paragraphTypography = $paragraphTypography ?? []; |
| 132 |
$buttonTypography = $buttonTypography ?? []; |
| 133 |
$buttonStyle = $buttonStyle ?? []; |
| 134 |
|
| 135 |
$posterDesktop = $posterSources['desktop']['url'] ?? ( $poster['url'] ?? '' ); |
| 136 |
$posterTablet = $posterSources['tablet']['url'] ?? ''; |
| 137 |
$posterMobile = $posterSources['mobile']['url'] ?? ''; |
| 138 |
|
| 139 |
$minHeightTablet = $minHeightTablet ?: $minHeight; |
| 140 |
$minHeightMobile = $minHeightMobile ?: $minHeight; |
| 141 |
$resolvedPaddingTablet = vbb_resolve_space( $paddingTablet ?? [], $padding ?? [] ); |
| 142 |
$resolvedPaddingMobile = vbb_resolve_space( $paddingMobile ?? [], $padding ?? [] ); |
| 143 |
|
| 144 |
$posterBlur = ! empty( $posterOptions['blur'] ) ? (int) ( $posterOptions['blurAmount'] ?? 12 ) : 0; |
| 145 |
$posterDisplay = isset( $posterOptions['show'] ) && ! $posterOptions['show'] ? 'none' : 'block'; |
| 146 |
$posterColor = $posterOptions['dominantColor'] ?? '#000000'; |
| 147 |
$posterAuto = ! empty( $posterOptions['dominantAuto'] ); |
| 148 |
$overlayOpacity = isset( $overlayOpacity ) ? (float) $overlayOpacity : 1; |
| 149 |
$overlayBlendMode = $overlayBlendMode ?? 'normal'; |
| 150 |
$overlayPattern = $overlayPattern ?? 'none'; |
| 151 |
$overlayPatternOpacity = isset( $overlayPatternOpacity ) ? (float) $overlayPatternOpacity : 0.2; |
| 152 |
$overlayAnimate = ! empty( $overlayAnimate ); |
| 153 |
$overlayNoise = ! empty( $overlayNoise ); |
| 154 |
$overlayVignette = ! empty( $overlayVignette ); |
| 155 |
$videoFit = $videoFit ?? 'cover'; |
| 156 |
$focusPoint = $focusPoint ?? [ 'x' => 50, 'y' => 50 ]; |
| 157 |
$focusX = isset( $focusPoint['x'] ) ? (int) $focusPoint['x'] : 50; |
| 158 |
$focusY = isset( $focusPoint['y'] ) ? (int) $focusPoint['y'] : 50; |
| 159 |
$startTime = isset( $startTime ) ? (float) $startTime : 0; |
| 160 |
$endTime = isset( $endTime ) ? (float) $endTime : 0; |
| 161 |
$playbackRate = isset( $playbackRate ) ? (float) $playbackRate : 1; |
| 162 |
$muted = isset( $muted ) ? (bool) $muted : true; |
| 163 |
$volume = isset( $volume ) ? (float) $volume : 1; |
| 164 |
$audioOnClick = ! empty( $audioOnClick ); |
| 165 |
|
| 166 |
$mainSl = "#$id"; |
| 167 |
$styles = "$mainSl{ |
| 168 |
min-height: $minHeight; |
| 169 |
--vbb-video-fit: $videoFit; |
| 170 |
--vbb-overlay-opacity: $overlayOpacity; |
| 171 |
--vbb-overlay-blend: $overlayBlendMode; |
| 172 |
--vbb-overlay-pattern: " . ( 'none' !== $overlayPattern ? ( $overlayPattern === 'dots' |
| 173 |
? 'radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1px)' |
| 174 |
: ( $overlayPattern === 'grid' |
| 175 |
? 'linear-gradient(rgba(255,255,255,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.25) 1px, transparent 1px)' |
| 176 |
: 'repeating-linear-gradient(45deg, rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 1px, transparent 1px, transparent 8px)' ) ) : 'none' ) . "; |
| 177 |
--vbb-overlay-pattern-opacity: $overlayPatternOpacity; |
| 178 |
--vbb-overlay-noise: " . ( $overlayNoise ? '1' : '0' ) . "; |
| 179 |
--vbb-overlay-vignette: " . ( $overlayVignette ? '1' : '0' ) . "; |
| 180 |
--vbb-overlay-float: " . ( $overlayAnimate ? 'vbbOverlayFloat 16s linear infinite' : 'none' ) . "; |
| 181 |
--vbb-overlay-pulse: " . ( $overlayAnimate ? 'vbbOverlayPulse 12s ease-in-out infinite' : 'none' ) . "; |
| 182 |
} |
| 183 |
$mainSl .vbbPosterLayer{ |
| 184 |
display: $posterDisplay; |
| 185 |
background-image: url($posterDesktop); |
| 186 |
background-color: var(--vbb-poster-color, $posterColor); |
| 187 |
background-position: {$focusX}% {$focusY}%; |
| 188 |
filter: blur({$posterBlur}px); |
| 189 |
} |
| 190 |
$mainSl .vbbVideoPlayer{ |
| 191 |
object-fit: $videoFit; |
| 192 |
object-position: {$focusX}% {$focusY}%; |
| 193 |
} |
| 194 |
$mainSl .vbbVideoContent{ |
| 195 |
justify-content: $verticalAlign; |
| 196 |
text-align: $textAlign; |
| 197 |
min-height: $minHeight; |
| 198 |
padding: " . VBB\GetCSS::getSpaceCSS( $padding ) . "; |
| 199 |
} |
| 200 |
$mainSl .vbbVideoOverlay{ |
| 201 |
" . VBB\GetCSS::getBackgroundCSS( $bgOverlay ) . " |
| 202 |
} |
| 203 |
@media (max-width: 1024px){ |
| 204 |
$mainSl{ |
| 205 |
min-height: $minHeightTablet; |
| 206 |
} |
| 207 |
$mainSl .vbbVideoContent{ |
| 208 |
min-height: $minHeightTablet; |
| 209 |
padding: " . VBB\GetCSS::getSpaceCSS( $resolvedPaddingTablet ) . "; |
| 210 |
} |
| 211 |
$mainSl .vbbPosterLayer{ |
| 212 |
background-image: url(" . ( $posterTablet ?: $posterDesktop ) . "); |
| 213 |
} |
| 214 |
} |
| 215 |
@media (max-width: 767px){ |
| 216 |
$mainSl{ |
| 217 |
min-height: $minHeightMobile; |
| 218 |
} |
| 219 |
$mainSl .vbbVideoContent{ |
| 220 |
min-height: $minHeightMobile; |
| 221 |
padding: " . VBB\GetCSS::getSpaceCSS( $resolvedPaddingMobile ) . "; |
| 222 |
} |
| 223 |
$mainSl .vbbPosterLayer{ |
| 224 |
background-image: url(" . ( $posterMobile ?: ( $posterTablet ?: $posterDesktop ) ) . "); |
| 225 |
} |
| 226 |
}"; |
| 227 |
|
| 228 |
$sourceType = $sourceType ?? 'self'; |
| 229 |
|
| 230 |
$overlayPatternCss = 'none'; |
| 231 |
if ( 'dots' === $overlayPattern ) { |
| 232 |
$overlayPatternCss = 'radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1px)'; |
| 233 |
} elseif ( 'grid' === $overlayPattern ) { |
| 234 |
$overlayPatternCss = 'linear-gradient(rgba(255,255,255,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.25) 1px, transparent 1px)'; |
| 235 |
} elseif ( 'diagonal' === $overlayPattern ) { |
| 236 |
$overlayPatternCss = 'repeating-linear-gradient(45deg, rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 1px, transparent 1px, transparent 8px)'; |
| 237 |
} |
| 238 |
$overlayFloat = $overlayAnimate ? 'vbbOverlayFloat 16s linear infinite' : 'none'; |
| 239 |
$overlayPulse = $overlayAnimate ? 'vbbOverlayPulse 12s ease-in-out infinite' : 'none'; |
| 240 |
$overlayStyle = sprintf( |
| 241 |
'--vbb-overlay-opacity:%s; --vbb-overlay-blend:%s; --vbb-overlay-pattern:%s; --vbb-overlay-pattern-opacity:%s; --vbb-overlay-vignette:%s; --vbb-overlay-float:%s; --vbb-overlay-pulse:%s;', |
| 242 |
esc_attr( (string) $overlayOpacity ), |
| 243 |
esc_attr( $overlayBlendMode ), |
| 244 |
esc_attr( $overlayPatternCss ), |
| 245 |
esc_attr( (string) $overlayPatternOpacity ), |
| 246 |
esc_attr( $overlayVignette ? '1' : '0' ), |
| 247 |
esc_attr( $overlayFloat ), |
| 248 |
esc_attr( $overlayPulse ) |
| 249 |
); |
| 250 |
|
| 251 |
$videoDesktopMp4 = $videoSources['desktop']['mp4']['url'] ?? ( $video['url'] ?? '' ); |
| 252 |
$videoDesktopWebm = $videoSources['desktop']['webm']['url'] ?? ''; |
| 253 |
$videoDesktopOgg = $videoSources['desktop']['ogg']['url'] ?? ''; |
| 254 |
$videoTabletMp4 = $videoSources['tablet']['mp4']['url'] ?? ''; |
| 255 |
$videoTabletWebm = $videoSources['tablet']['webm']['url'] ?? ''; |
| 256 |
$videoTabletOgg = $videoSources['tablet']['ogg']['url'] ?? ''; |
| 257 |
$videoMobileMp4 = $videoSources['mobile']['mp4']['url'] ?? ''; |
| 258 |
$videoMobileWebm = $videoSources['mobile']['webm']['url'] ?? ''; |
| 259 |
$videoMobileOgg = $videoSources['mobile']['ogg']['url'] ?? ''; |
| 260 |
|
| 261 |
$youtubeUrl = $youtubeUrl ?? ''; |
| 262 |
$youtubeUrlTablet = $youtubeUrlTablet ?? ''; |
| 263 |
$youtubeUrlMobile = $youtubeUrlMobile ?? ''; |
| 264 |
$vimeoUrl = $vimeoUrl ?? ''; |
| 265 |
$vimeoUrlTablet = $vimeoUrlTablet ?? ''; |
| 266 |
$vimeoUrlMobile = $vimeoUrlMobile ?? ''; |
| 267 |
$ytNoCookie = ! empty( $ytNoCookie ); |
| 268 |
|
| 269 |
?> |
| 270 |
<div |
| 271 |
<?php echo get_block_wrapper_attributes( [ 'class' => $overlayNoise ? 'vbbOverlayNoise' : '' ] ); ?> |
| 272 |
id='<?php echo esc_attr( $id ); ?>' |
| 273 |
data-poster-desktop='<?php echo esc_attr( $posterDesktop ); ?>' |
| 274 |
data-poster-tablet='<?php echo esc_attr( $posterTablet ); ?>' |
| 275 |
data-poster-mobile='<?php echo esc_attr( $posterMobile ); ?>' |
| 276 |
data-poster-color='<?php echo esc_attr( $posterColor ); ?>' |
| 277 |
data-poster-auto='<?php echo $posterAuto ? '1' : '0'; ?>' |
| 278 |
data-video-fit='<?php echo esc_attr( $videoFit ); ?>' |
| 279 |
data-focus-x='<?php echo esc_attr( (string) $focusX ); ?>' |
| 280 |
data-focus-y='<?php echo esc_attr( (string) $focusY ); ?>' |
| 281 |
data-start-time='<?php echo esc_attr( (string) $startTime ); ?>' |
| 282 |
data-end-time='<?php echo esc_attr( (string) $endTime ); ?>' |
| 283 |
data-playback-rate='<?php echo esc_attr( (string) $playbackRate ); ?>' |
| 284 |
data-muted='<?php echo $muted ? '1' : '0'; ?>' |
| 285 |
data-volume='<?php echo esc_attr( (string) $volume ); ?>' |
| 286 |
data-audio-on-click='<?php echo $audioOnClick ? '1' : '0'; ?>' |
| 287 |
data-embed-type='<?php echo esc_attr( $sourceType ); ?>' |
| 288 |
data-yt-no-cookie='<?php echo $ytNoCookie ? '1' : '0'; ?>' |
| 289 |
data-youtube-url-desktop='<?php echo esc_attr( $youtubeUrl ); ?>' |
| 290 |
data-youtube-url-tablet='<?php echo esc_attr( $youtubeUrlTablet ); ?>' |
| 291 |
data-youtube-url-mobile='<?php echo esc_attr( $youtubeUrlMobile ); ?>' |
| 292 |
data-vimeo-url-desktop='<?php echo esc_attr( $vimeoUrl ); ?>' |
| 293 |
data-vimeo-url-tablet='<?php echo esc_attr( $vimeoUrlTablet ); ?>' |
| 294 |
data-vimeo-url-mobile='<?php echo esc_attr( $vimeoUrlMobile ); ?>' |
| 295 |
> |
| 296 |
<style> |
| 297 |
<?php echo esc_html( $styles ); ?> |
| 298 |
</style> |
| 299 |
|
| 300 |
<div class='vbbPosterLayer'></div> |
| 301 |
|
| 302 |
<?php if ( 'self' === $sourceType ) : ?> |
| 303 |
<video |
| 304 |
autoplay |
| 305 |
<?php echo $audioOnClick ? 'muted' : ( $muted ? 'muted' : '' ); ?> |
| 306 |
loop |
| 307 |
playsinline |
| 308 |
class='vbbVideoPlayer' |
| 309 |
poster='<?php echo esc_attr( $posterDesktop ); ?>' |
| 310 |
data-audio-on-click='<?php echo $audioOnClick ? '1' : '0'; ?>' |
| 311 |
data-volume='<?php echo esc_attr( (string) $volume ); ?>' |
| 312 |
> |
| 313 |
<?php if ( $videoDesktopWebm || $videoTabletWebm || $videoMobileWebm ) : ?> |
| 314 |
<source type='video/webm' src='<?php echo esc_attr( current( array_filter( [ $videoDesktopWebm, $videoTabletWebm, $videoMobileWebm ] ) ) ); ?>' data-src-desktop='<?php echo esc_attr( $videoDesktopWebm ); ?>' data-src-tablet='<?php echo esc_attr( $videoTabletWebm ); ?>' data-src-mobile='<?php echo esc_attr( $videoMobileWebm ); ?>' /> |
| 315 |
<?php endif; ?> |
| 316 |
<?php if ( $videoDesktopOgg || $videoTabletOgg || $videoMobileOgg ) : ?> |
| 317 |
<source type='video/ogg' src='<?php echo esc_attr( current( array_filter( [ $videoDesktopOgg, $videoTabletOgg, $videoMobileOgg ] ) ) ); ?>' data-src-desktop='<?php echo esc_attr( $videoDesktopOgg ); ?>' data-src-tablet='<?php echo esc_attr( $videoTabletOgg ); ?>' data-src-mobile='<?php echo esc_attr( $videoMobileOgg ); ?>' /> |
| 318 |
<?php endif; ?> |
| 319 |
<?php if ( $videoDesktopMp4 || $videoTabletMp4 || $videoMobileMp4 ) : ?> |
| 320 |
<source type='video/mp4' src='<?php echo esc_attr( current( array_filter( [ $videoDesktopMp4, $videoTabletMp4, $videoMobileMp4 ] ) ) ); ?>' data-src-desktop='<?php echo esc_attr( $videoDesktopMp4 ); ?>' data-src-tablet='<?php echo esc_attr( $videoTabletMp4 ); ?>' data-src-mobile='<?php echo esc_attr( $videoMobileMp4 ); ?>' /> |
| 321 |
<?php endif; ?> |
| 322 |
Your browser does not support HTML5 video. |
| 323 |
</video> |
| 324 |
<?php endif; ?> |
| 325 |
|
| 326 |
<?php if ( 'youtube' === $sourceType ) : ?> |
| 327 |
<?php $yt_embed = vbb_build_youtube_embed( $youtubeUrl, $ytNoCookie ); ?> |
| 328 |
<?php if ( $yt_embed ) : ?> |
| 329 |
<iframe |
| 330 |
class='vbbVideoEmbed' |
| 331 |
title='YouTube background video' |
| 332 |
src='<?php echo esc_attr( $yt_embed ); ?>' |
| 333 |
frameborder='0' |
| 334 |
allow='autoplay; fullscreen; picture-in-picture' |
| 335 |
allowfullscreen |
| 336 |
></iframe> |
| 337 |
<?php endif; ?> |
| 338 |
<?php endif; ?> |
| 339 |
|
| 340 |
<?php if ( 'vimeo' === $sourceType ) : ?> |
| 341 |
<?php $vimeo_embed = vbb_build_vimeo_embed( $vimeoUrl ); ?> |
| 342 |
<?php if ( $vimeo_embed ) : ?> |
| 343 |
<iframe |
| 344 |
class='vbbVideoEmbed' |
| 345 |
title='Vimeo background video' |
| 346 |
src='<?php echo esc_attr( $vimeo_embed ); ?>' |
| 347 |
frameborder='0' |
| 348 |
allow='autoplay; fullscreen; picture-in-picture' |
| 349 |
allowfullscreen |
| 350 |
></iframe> |
| 351 |
<?php endif; ?> |
| 352 |
<?php endif; ?> |
| 353 |
|
| 354 |
<div class='vbbVideoOverlay' style='<?php echo $overlayStyle; ?>'></div> |
| 355 |
|
| 356 |
<div class='vbbVideoContent'> |
| 357 |
<?php echo wp_kses_post( $content ); ?> |
| 358 |
</div> |
| 359 |
</div> |
| 360 |
|
| 361 |
|
