Adresse
Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn
next Color-Section
with Option: „Add Codeblock to Content“
<video class="responsive-background-video"
autoplay muted loop playsinline
data-video-mobile="path/to/mobile.mp4"
data-video-desktop="path/to/desktop.mp4">
<source src="" type="video/mp4">
</video>for Child-theme functions.php
function custom_responsive_background_video_script() {
?>
<script>
(function($) {
"use strict";
$(document).ready(function() {
$('.responsive-background-video').each(function() {
const video = this;
const $video = $(video);
const source = video.querySelector('source');
const win = $(window);
// Get video paths from data attributes
const mobileVideo = $video.data('video-mobile');
const desktopVideo = $video.data('video-desktop');
if (!mobileVideo || !desktopVideo) return;
function updateVideoSource() {
const isMobile = win.width() < 990;
const newSrc = isMobile ? mobileVideo : desktopVideo;
if (source.src.indexOf(newSrc) === -1) {
source.src = newSrc;
video.load();
}
}
// Initial load
updateVideoSource();
// Resize handling
win.on('debouncedresize', updateVideoSource);
});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_responsive_background_video_script', 999);for Quick CSS
.responsive #top #wrap_all .avia-section.av-video-section {
position: relative;
overflow: hidden;
min-height: initial; /* taken from Enfold section setting */
}
.responsive #top #wrap_all .avia-section.av-video-section .container {
position: relative;
z-index: 1;
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
}
.responsive #top #wrap_all .avia-section.av-video-section .responsive-background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover !important;
z-index: 0;
min-height: inherit; /* transfer from Enfold section setting */
}
.responsive #top #wrap_all .avia-section.av-video-section .avia-divider-svg {
z-index:2;
}
.responsive #top #wrap_all .avia-section.av-video-section .avia-divider-svg.avia-to-front {
z-index:100;
}and custom-class: av-video-section