Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • April 1, 2016 at 9:26 pm #606870
    KelseyCurran

    I’d like to create a grid of “images” that play mini video clips when hovered over… any ideas on how to go about that with the current features you offer? Or maybe I need to install something additionally?

    April 1, 2016 at 9:48 pm #606871
    KelseyCurran

    Like this.. http://jsfiddle.net/gaby/0o8tt2z8/1/

    April 3, 2016 at 7:54 am #607153
    Rikard

    Hi,

    There is nothing like that in the theme by default but you could try implementing that code on a page to see if it works out for you?

    Thanks,
    Rikard

    April 4, 2016 at 3:05 pm #607651
    KelseyCurran

    Thanks! It doesn’t work for me, I think it’s because I can’t add figure out where to add the Java… does the theme allow me to add me own somehow?

    April 4, 2016 at 3:23 pm #607665
    Vinay

    Hey!

    Implementing this will this is a bit more complicated than copy pasting this code let’s see what best we can do for you…

    Add the js code in the below code and finally paste it in the functions.php

    // Video on hover
function playon_hover(){
?>
<script>

// ADD YOUR CUSTOM SCRIPT HERE

</script>
<?php
}
add_action('wp_footer', 'playon_hover');

    Please note that the class names and path int he js code should match your site.

    Then use Codeblock element to add your images with video…

    Best regards,
    Vinay

    April 4, 2016 at 3:26 pm #607668
    Yigit

    Hi!

    Please add following code to Functions.php file in Appearance > Editor

    function custom_video_preview(){
?>
 <script>
var figure = jQuery(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) {  
    jQuery('video', this).get(0).play(); 
}

function hideVideo(e) {
    jQuery('video', this).get(0).pause(); 
}
 </script>
<?php
}
add_action('wp_footer', 'custom_video_preview');

    then add your custom CSS code into Quick CSS field and you can add your HTML code in text tab of Text Block element or into Code Block element

    Best regards,
    Yigit

    April 21, 2016 at 4:43 pm #619256
    KelseyCurran

    Still no luck…

    http://goliathgauntlet.com/video-test/

    • This reply was modified 8 years, 8 months ago by KelseyCurran.
    April 21, 2016 at 4:57 pm #619262
    KelseyCurran

    AGH! It’s working now! No idea what changed… THANK YOU!!!!

    April 25, 2016 at 8:27 am #621066
    Rikard

    Hi,

    Sorry for the late reply, glad you got it working. Please let us know if you should need any more help on the topic.

    Thanks,
    Rikard

    September 29, 2016 at 6:37 am #692956
    domainarchitect

    Is this possible with just the code in this thread? This seems pretty damn cool.

    @Kelsey, I love the site!

    September 29, 2016 at 10:21 am #693027
    Vinay

    Hi,

    Thank you for the kind words. did you try the code?

    let us know if you have any issue.

    Best regards,
    Vinay

    January 11, 2019 at 9:18 pm #1052911
    MystikCed

    Hello,
    I did not succeed … Can you help me?
    Is there another method?
    Thanks

    January 14, 2019 at 8:15 am #1053567
    Ismael

    Hi,

    This might help:

    // https://kriesi.at/support/topic/video-on-hover-for-portfolio-items/

    Best regards,
    Ismael

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.