-
AuthorPosts
-
May 30, 2016 at 7:22 am #640154
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,
NeppyMay 30, 2016 at 10:42 am #640210Hey 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,
VinayMay 31, 2016 at 5:23 am #640676Thanks Vinay,
Will this work with Youtube video as I don’t want to host the video?
May 31, 2016 at 6:09 am #640693Thanks it works perfect.
May 31, 2016 at 6:11 am #640694How do I stop the video in the background from repeating?
May 31, 2016 at 7:33 am #640719Hi,
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,
VinayJune 1, 2016 at 6:24 am #641243No 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 #641252Also 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 #641991Hi,
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,
AndyJune 3, 2016 at 2:49 am #642337Thanks 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,
AndyJune 4, 2016 at 10:18 am #642891Hi,
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,
VinayJune 6, 2016 at 3:47 am #643231Thanks 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 #643354June 18, 2016 at 1:50 am #650044Hi 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,
NepJune 20, 2016 at 7:48 pm #651046Hi,
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, 6 months ago by Vinay.
-
AuthorPosts
- You must be logged in to reply to this topic.