Self-Hosted Video Background Pt. 2

Hey DimaP,

Thank you for using Enfold.

The following solution should fix the issue with the fallback image.

// https://kriesi.at/support/topic/fullwidth-easy-slider-with-video-asking-for-object-on-mobile/#post-955294

Let us know if you need more help.

Best regards,
Ismael

Hi,

Thanks for the update.

Replace the config-templatebuilder > avia-shortcodes > slideshow > slideshow.js file with this code.

// https://pastebin.com/9Dk7PFsU

Don’t forget to toggle the Enfold > Performance > File Compression settings after replacing the file.

Yes, the video quality depends on the connection speed. If I am not mistaken, there’s a setting somewhere in the youtube panel where you can force the video to play on the highest quality every time.

Best regards,
Ismael

Hi,

The changes in that file are going to be included in the next patch. You have to add it manually for now.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,

That is the column offset. You can adjust that for mobile view. Just add this css code.

@media only screen and (max-width: 1024px) {
    #agency .flex_column_table.av-equal-height-column-flextable.-flextable {
        margin-top: -50px !important;
    }
}

Best regards,
Ismael

Hey!

Try to adjust the margin-top value to -100px or lower.

Cheers!
Ismael

Hi,

Thanks for the update.

Try to decrease the font size of the title and the caption and then increase the height of the slider.

@media only screen and (max-width: 1200px) {
#top .av-video-slide .avia-slideshow-inner {
   min-height: 50vh;
}

.avia_transform .av_slideshow_full .active-slide .avia-caption-title, .avia_transform .av_fullscreen .active-slide .avia-caption-title {
    font-size: 24px !important;
}

.avia-caption-content p {
    font-size: 15px !important;
}
}

Best regards,
Ismael

Hi,

Thanks for the update.

This is what I get when I add the code.

// https://imgur.com/a/n2Qblvq

I just added it on the browser inspector so the video size is a little bit off on the screenshot.

Best regards,
Ismael

Hi,

nope, you’ve just sent me the Logo which is working as charm now thanks to the guys.

No, I didn’t. Please check the screenshot again. We adjusted the code on the Quick CSS field. Please purge the cache before checking the page.

  #top .avia-slideshow-inner,  #top .avia-slide-wrap, #top .avia-slideshow li  {
    min-height: 50vh !important;
   }

#top .avia-slideshow li {
    background-size: cover;
    background-position: center center;
}

#top  .av_slideshow_full li img {
    visibility: hidden;
}
   
  .avia_transform .av_slideshow_full .active-slide .avia-caption-title, .avia_transform .av_fullscreen .active-slide .avia-caption-title {
     font-size: 24px !important;
  }
   
  #top .avia-caption-content p {
     font-size: 15px !important;
  }

We also included this script in the functions.php file:

add_action('wp_footer', 'ava_custom_mobile_slide_background');
function ava_custom_mobile_slide_background(){
	?>
	<script type="text/javascript">
		(function($) {	
            var isMobile = false;

            if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement)
            {
                isMobile =  true;
            }
            else
            {
                isMobile =  false;
            }

            console.log(isMobile);

            if(!isMobile) return;
           
            $('.avia-fullwidth-slider div li').each( function(e) {
                $(this).css('background-image', 'url('+ $(this).data("mobile-img") + ')');
            });

             $('.avia-fullwidth-slider div li').on( 'click', function(e) {
                var link = $(this).find('img').parent('a');
                link.trigger('click');
            });
		})(jQuery);
	</script>
	<?php
}

Best regards,
Ismael

Hi,

No, they’re not going to be included in the next update because they’re quite specific to your site. Please take note of the modification or create a change log.

Best regards,
Ismael