Home Forums Themes Support How to customize Video Player in Haru Video Theme

Tagged: 

This topic contains 0 replies, has 1 voice, and was last updated by  admin 1 week, 4 days ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #1651

    Hi all our customer,

    In this topic we’ll help you customize Video Player in our theme.

    Step 1: Know about Player settings.

    • Setting for Player in Theme Options -> XXX Settings (XXX is name of theme). You can see it in {yourwebroot}/wp-content/themes/haru-circle/framework/includes/theme-options.php.
    • Go to line 912 you will see Player setting like this:

    You can add new option and process

    Step 2: Display Player at Frontend

    • Display Player in single video:

    – You can see it in {yourwebroot}/wp-content/themes/haru-circle/templates/single/content-haru-video.php

    Video Player in Popup. We use AJAX to load video. You can see template of popup video in {yourwebroot}/wp-content/plugins/haru-circle-core/includes/circle/class-circle-helper.php. The code to display modal like this:

    Please note about autoplay video must be muted. More you can see here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

    So If you want video have audio, you can remove the code: &mute=1 or &muted=1 with Vimeo video. But use need click play button to play the video.

    Video Player Direct. You can see the template in {yourwebroot}/wp-content/themes/haru-circle/templates/single/video-player-direct.php. You can customize similar with player in popup.

    • Display Player in Video Shortcode:

    As follow this topic tutorial to customize using child theme here: http://harutheme.com/forums/topic/customize-wordpress-theme-using-child-theme/

    All our video shortcode display you can customize in  {yourwebroot}/wp-content/plugins/haru-circle-core/templates/posttype/video/

    Step 3: Know about JS

    JS for display player in our theme you can see in {yourwebroot}/wp-content/themes/haru-circle/assets/js/haru-circle.js

    The js code for video you can search the code: HaruCircle.video (line 340)

    • The function: displayVideoPlayer() display player in Popup
    • The function: displayVideoPlayerDirect() display player direct in single Video.

    Hope this will help you to easy know about how video work in our theme and help you can customize to fit your work.

    *****

    Best regards,

    HaruTheme

     

     

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.