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


This topic contains 0 replies, has 1 voice, and was last updated by  admin 2 months, 2 weeks ago.

Viewing 1 post (of 1 total)
  • Author
  • #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,




Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.