Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 4, 2019 at 4:24 pm #1145013
    npmcgrew

    Hello,

    I have been trying to find a way to include a fullscreen video (via YouTube) on our landing page to immediately grab visitors’ attention. I found an easy way to do this by using the fullscreen slider and just having a single video slide, so that part is good.

    What I am hoping to do in addition to this and hopefully without the use of a plugin is to implement one of the two following ideas:
    – Idea 1: To have a call to action that appears after a preset amount of time displaying a short bit of text and then a button to go purchase the product. I’m hoping for this to be an overlay at the bottom part of the video so that the text and button are more effective.

    – Idea 2: To have a call to action that slides up or fades into the bottom portion of the video during a mouseover. I would compare this idea to buttons whose icons are only visible upon hover, except this would make a call to action element only visible on hover.

    Here’s an image example: Video Idea - Mockup

    Are there any examples of something like the above or any way that you may know how to accomplish this? I have looked at a number of plugins, but I am hoping to keep the number of plugins to a minimum to speed up page load times with the presence of a fullscreen video.

    Thank you much in advance!

    – Neil

    October 6, 2019 at 10:08 pm #1145553
    Mike

    Hey npmcgrew,
    Sorry for the late reply, the full-screen slider includes a caption and buttons the could be positioned on the screen with it’s own options or css, and jQuery could be used to add a delay before it showed.
    Please try creating a demo page with the video and the caption and button.
    I see your landing page above but it’s not created with the full-screen video and caption.

    Best regards,
    Mike

    October 7, 2019 at 5:26 pm #1145851
    npmcgrew

    Hi Mike,

    No worries, I always appreciate the help regardless. I went ahead and inserted the fullscreen slider at the top of the landing page. The first one is 16:9 and the second one is displayed using “display video in default mode”, feel free to select which slider you think will functionally work better.

    My other thought here was using a color section below with a negative whitespace above it to fade in with the text and button. But, I’m not sure how well that might work across different devices when it comes to spacing.

    Many thanks in advance, Mike!

    October 11, 2019 at 5:33 am #1147009
    Mike

    Hi,
    Sorry for the late reply, thank you for creating the demo page. I hid the second slider via the screen options in the element because I thought the first looked best at full screen, your slider link works well and I added this javascript in a code block element to delay the caption from showing for 19 seconds, I was not sure how long you wished to delay it for.

    <script>
jQuery(document).ready(function($) {
$('.slideshow_inner_caption').css('display','none');  
$('.slideshow_inner_caption').delay(19000).fadeIn("slow");  
});
</script>

    Adding the script to a code block element ensures it only fires on this page, plus I see that you are not using a child theme, so this will keep you from losing it with updates.
    Please clear your browser cache and check.

    Best regards,
    Mike

    October 25, 2019 at 6:22 pm #1151280
    npmcgrew

    Awesome, thank you Mike! I appreciate the help!

    October 26, 2019 at 11:02 am #1151330
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Fullscreen Video with Call to Action Element’ is closed to new replies.