Home Forums Themes Support Formota How to create video thumbnail autoplay in Formota theme.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #9077

    Hi all customer,

    In this topic tutorial, we’ll help you create (setup) video thumbnail autoplay.

    Step 1: Create a video and set thumbnail style is video:

    Step 2: Currently you need to hover video to see it play. You need customize 2 files to get it Autoplay. For easy to manage files please install File Manager plugin like this:

    File Manager

     

    Open file: wp-content/themes/formota/framework/includes/ then open file theme-functions.php

    Go to line 1125 and change the code in function haru_get_video_thumbnail() from

    <video src="<?php echo esc_url( get_post_meta( $video_id, 'haru_video' . '_thumbnail_video', true ) ); ?>"></video>

    to

    <video src="<?php echo esc_url( get_post_meta( $video_id, 'haru_video' . '_thumbnail_video', true ) ); ?>" autoplay loop muted playsinline webkit-playsinline></video>

    Open file: wp-content/themes/formota/assets/js then open file haru-formota.js

    Find and delete or comment the code from line 398 to 405: (From version 1.4.8 you don’t need to do this step)

    $self.hover(function(){
    let video = $('video', this).get(0);
    video.play();
    video.muted = false;
    }, function() {
    let video = $('video', this).get(0);
    video.pause();
    });

    Please clear cache to see changes.

    Hope this helps!

     

    ****
    Regards,

    HaruTheme

     

    • This topic was modified 1 year ago by admin.
    • This topic was modified 1 year ago by admin.
    • This topic was modified 1 year ago by admin.
    • This topic was modified 1 year ago by admin.
    • This topic was modified 1 year ago by admin.
    #9082

    Steps to do via child theme:
    Step 1: Upload & install then activate child theme Formota-child
    Step 2: open file functions.php of child theme and add this:

    function haru_get_video_thumbnail( $video_id ) {
            $thumbnail_style = get_post_meta( $video_id, 'haru_video' . '_thumbnail_style', true );
    
            if ( !isset( $thumbnail_style ) ) {
                $thumbnail_style = 'default';
            }
    
            if ( $thumbnail_style == 'slideshow' ) {
                $thumbnail_images =  get_post_meta( $video_id, 'haru_video' . '_thumbnail_images', false );
                $thumbnail_count = count($thumbnail_images);
            ?>
            <div class="video-thumbnail-slideshow" data-speed="1000">
                <img src="<?php echo esc_url( get_the_post_thumbnail_url( $video_id, 'full' ) ); ?>" alt="<?php echo esc_attr( get_the_title( $video_id ) ); ?>">
                <?php
                if ( isset($thumbnail_images) && !empty($thumbnail_images) ) :
                    $i = 1;
                    foreach( $thumbnail_images as $key => $thumbnail ) :
                        if ( $i <= $thumbnail_count ) :
                ?>
                <img src="<?php echo wp_get_attachment_image_src( $thumbnail, 'full' )[0]; ?>" alt="<?php echo esc_attr( get_the_title( $video_id ) ); ?>">
                <?php 
                        endif;
                        $i++;
                    endforeach;
                endif;
                ?>
            </div>
            <?php
            } else if ( $thumbnail_style == 'video' ) {
            ?>
            <div class="video-thumbnail-video video-autoplay">
                <?php the_post_thumbnail(); ?>
                <video src="<?php echo esc_url( get_post_meta( $video_id, 'haru_video' . '_thumbnail_video', true ) ); ?>" autoplay loop muted playsinline webkit-playsinline></video>
            </div>
            <?php
            } else {
                the_post_thumbnail();
            }
    }

    Hope this helps!

    ****
    Regards,
    HaruTheme

    • This reply was modified 1 year ago by admin.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.