Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • May 30, 2016 at 7:22 am #640154
    nep102

    Hi there,

    I have a client who’s looking to play their video on the homepage and wants the header section to appeal when it’s finished. So, maybe making the header appear or delayed with a timer?

    What’s the best way of making this happen?

    Thanks,
    Neppy

    May 30, 2016 at 10:42 am #640210
    Vinay

    Hey nep102,

    Add your video to homepage body background or use the page ID or the below css with correct background source path.

    .home {
background: url('video.mp4');
}

    then Please try adding this at the very end of your themes / child themes functions.php file: set delay 5000 to match the video length in line setTimeout(showpanel, 5000) 

    function fadein_page(){
?>
<script>
jQuery(document).ready(function(){  
// Add your jQuery script here
    jQuery('#wrap_all').addClass('hidden');
 function showpanel() {     
    jQuery('#wrap_all').fadeIn(1000).removeClass('hidden');
 }
 // set delay
 setTimeout(showpanel, 5000)   

});
</script>
<?php
}
add_action('wp_head', 'fadein_page');

    Best regards,
    Vinay

    May 31, 2016 at 5:23 am #640676
    nep102

    Thanks Vinay,

    Will this work with Youtube video as I don’t want to host the video?

    May 31, 2016 at 6:09 am #640693
    nep102

    Thanks it works perfect.

    May 31, 2016 at 6:11 am #640694
    nep102

    How do I stop the video in the background from repeating?

    May 31, 2016 at 7:33 am #640719
    Vinay

    Hi,

    May i know how the background video is setup? Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Vinay

    June 1, 2016 at 6:24 am #641243
    nep102

    No problems, I have just done a mock-up here http://steel.neptunedesign.com.au/ – The video is embeded in the color column using the video as the background. Also with the #header section, it is possible to hide the height as well as it’s still there as a background.

    Thanks Vanay.

    June 1, 2016 at 6:38 am #641252
    nep102

    Also Vinay, you cannot click the video to play on mobile devices. I get that it doesn’t do auto-play with some mobile but at least they should be able to click the play button for Youtube video to play. I am using Oppo with Chrome browser.

    June 2, 2016 at 12:25 pm #641991
    Andy

    Hi,

    use different tickets for different questions please.

    Not sure what you’re trying to achieve. Can you provide us a mockup showing the results please? What exactly do you want to achieve? cause the link you’ve provided looks good to me.

    Use Video Element for mobile devices instead. You can turn on custom classes for all alb elements and hide it on desktop, but show it on mobile only using media queries. If you need help with this let us know in your new ticket.

    Best regards,
    Andy

    June 3, 2016 at 2:49 am #642337
    nep102

    Thanks for that Andy, I got that one sorted.
    Regarding the video on the desktop, it’s doing the fade-in affect to all of my pages – I just need code to be included with the one Vinay gave me so it’s to work only for the homepage. You see what I mean when you click on “About Us” page.

    Thanks,
    Andy

    June 4, 2016 at 10:18 am #642891
    Vinay

    Hi,

    It appears you figured this one out but incase if you still need a workaround for this please add .home in front of #wrap_all

    jQuery('.home #wrap_all')

    and on the line

    jQuery('.home #wrap_all').fadeIn(1000).removeClass('hidden');

    Best regards,
    Vinay

    June 6, 2016 at 3:47 am #643231
    nep102

    Thanks Vinay,

    I found the code to only activate this on the homepage – <?php if(is_front_page()) : ?>

    Thanks again for your help.

    June 6, 2016 at 8:34 am #643354
    Rikard

    Hi,

    Great, glad you got it working :-)

    Thanks,
    Rikard

    June 18, 2016 at 1:50 am #650044
    nep102

    Hi again,
    How do I disabled this function when on mobile/tablets. Because it’s not use for it when auto play does not work.

    Thanks,
    Nep

    June 20, 2016 at 7:48 pm #651046
    Vinay

    Hi,

    Please use the code in an if statement. 

    function custom_func(){
?>
<script>
	jQuery(document).ready(function(){
		if (jQuery(window).width() < 767) {       // if width is less than 767px
   			MobileFunctions();                 // execute mobile function
		}
		else {                              // if width is more than 767px
		   DesktopFunctions();               // execute desktop function
		}		
	});		
</script>
<?php
}
add_action('wp_head', 'custom_func');

    Best regards,
    Vinay

    • This reply was modified 8 years, 5 months ago by Vinay.
  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.