adding header video the front page along with the necessary styles

diff --git a/assets/videos/header.mp4 b/assets/videos/header.mp4
new file mode 100644 (file)
index 0000000..5447983
Binary files /dev/null and b/assets/videos/header.mp4 differ

diff --git a/assets/videos/poster.jpg b/assets/videos/poster.jpg
new file mode 100644 (file)
index 0000000..dd0f153
Binary files /dev/null and b/assets/videos/poster.jpg differ

diff --git a/includes/avada-functions.php b/includes/avada-functions.php
index a60f752..4deab0f 100644 (file)
--- a/includes/avada-functions.php
+++ b/includes/avada-functions.php
@@ -1030,13 +1030,54 @@ if ( ! function_exists( 'avada_sliders_container' ) ) {
                $queried_object_id = get_queried_object_id();
                ?>
 
-               <div id="sliders-container">
+               <div id="sliders-container" style="display: block;">
                        <?php
                        $slider_page_id = '';
                        $is_archive     = false;
 
                        if ( ! is_search() ) {
-                               $slider_page_id = '';
+                $slider_page_id = '';
+                if (is_front_page()) : ?>
+                    <div id="front-page-video-container">
+                   
+                        <div id="front-page-video-container-desktop" class="front-page-video-container show-for-large-up">
+                            <!-- <img src="<?php //bloginfo('template_url');?>/assets/mobile.jpg"> -->
+                            <video style="" id="front-page-video-container-desktop-video" class="front-page-video" playsinline loop autoplay muted preload="none" width="100%" poster="<?php bloginfo('template_url');?>/assets/videos/poster.jpg">
+                                <source src="<?php bloginfo('template_url'); ?>/assets/videos/header.mp4" type="video/mp4">
+                            </video>
+                        </div>
+                    </div>
+                <?php endif; ?>
+                <!-- <script>
+                    jQuery(window).on("load", function(){
+                        
+                        if( jQuery(window).width() < 1025) {
+                            jQuery("#front-page-video-container-mobile-video").get(0).play();
+                        } else{
+                            jQuery("#front-page-video-container-desktop-video").get(0).play();
+                        }
+                    });
+                </script> -->
+                <style>
+                    #front-page-video-container{
+                        max-height: 800px;
+                        overflow: hidden;
+                    }
+                    #front-page-video-container-mobile-video{
+                        width: 100%;
+                        height: auto;
+                    }
+                    @media (min-width: 1024px){
+                        #front-page-video-container-desktop-video{
+                            margin-top: -120px;
+                        }
+                    }
+                    #front-page-video-container-desktop-video{
+                        width: 100%;
+                        height: auto;
+                    }
+                </style>
+                <?php
                                if ( ( ! is_home() && ! is_front_page() && ! is_archive() && isset( $queried_object_id ) ) || ( ! is_home() && is_front_page() && isset( $queried_object_id ) ) ) {
                                        $slider_page_id = $queried_object_id;
                                }