• To improve performance and better customer
    experience we are maintaining our server.
    If you are getting login issues then
    please send an email at "themehunk@gmail.com"
  • Your query is valuable for us, you can post your query any time.
    We are ON in week days. You will get instant support in our working hours.
    We are little slow in non-working hours, but you will get response in maximum 24 hours.
    Our working timing is
    [10:00 AM (IST) - 7:00 PM (IST)]
    [6:30 AM (CET)- 3:30 PM (CET)]
    [12:30 AM (EST) - 9:30 AM (EST)]

    Login Rules
    1. Premium users can login directly using aMember credentials, Created at the time of purchase.
    2. Free users can re-register to access forum using this link : Register Here.

Video Controls not showing on background video (Big Image section)

#1
Hi great theme!
One snag... although the video tag has the "controls" set, it does not show them. I looked at many angles but do not see how t set this so they show. Please help.
 

Satyendraa

Moderator
Staff member
#2
Hello there,

Video controls won't show in background video, Actually technically this is not correct, it will make confusion with background content and actual content.

That is the reason it won't show control in background.

Kind Regards
 
#3
Hello, this is not the correct answer. I have used the controls in plain HTML sites for many years. See example below where you can mute and pause... (Same YTplayer!) Since it is a background doesn't mean you can allow the controls
1570000645426.png
 
#5
I am adding the video from the template
Customizing ▸ Frontpage Section ▸ Big Image with Typewriter
Select Background Type ▸ Video
Upload Background Video ▸ "MyVideo"

1570086880685.png
 
#6
Hey there again a simple solution would be to add a div:
<div class="video-controls">
<!-- Use a button to pause/play the video with JavaScript -->
<a class="fa fa-volume-off" id="video-volume" onclick="mute()" href="#"> </a>
<a class="fa fa-pause" id="video-play" onclick="playpause()" href="#"> </a>
</div>

Then a piece of js:

<script>
var video = document.getElementById("bgvid");
var btn = document.getElementById("video-play");
var btnM = document.getElementById("video-volume");

function playpause() {
if (video.paused) {
video.play();
btn.class = "fa fa-play";
} else {
video.pause();
btn.class = "fa fa-pause";
}
}
function mute() {
if (video.muted){
video.muted = false;
btnM.class = "fa fa-volume-up";
} else {
video.muted = true;
btnM.class = "fa fa-volume-off";
}
}
</script>


Then one small CSS part to get the focus right:

/* Add some content at the bottom of the background section */
.video-controls {
position: fixed;
margin-left:20px;
bottom: 0;
color: #f1f1f1;
width: 100%;
padding: 20px;
z-index: 3;
}
 
Last edited:
#8
Hello, can you give me a timeframe on this?
Or in case I would like to add the div itself, can you point me where to do so?
Thanks
 

Satyendraa

Moderator
Staff member
#9
Hello there,

Actually it is not possible to show controls on background video. Because front end content won't allow to access it.
Hope you understand.

Kind Regards
 
#10
I gave you a working example, come on.
Please tell me where i can add the div in the template. It should be in the section of the Big Image Type
I will make a screencast so you can easily see it work.
 
#12
I fixed it myself since "it could not be done"...
Naturally this should be added in the "customizer section" but did not want to mess with that.
Tested in (latest versions as of Oct 2019)
- Chrome
- Safari
- Firefox
Here is my solution:

in you custom.js i added at line 2
jQuery('<div class="video-controls"><a class="video-volume" onclick="muteVid()" id="video-volume" href="#"><i class="fa fa-volume-off"></i> </a> <a class="video-play" onclick="playVid()" id="video-play" href="#"><i class="fa fa-pause" ></i> </a> </div>').prependTo('#slider');

I also loaded a script in the footer to add the controls:
<script>
var video = document.getElementById("bgvid");
function playVid() {
jQuery(".video-play").find("i").toggleClass('fa-play fa-pause');
if (video.paused) {
video.play();
} else {
video.pause();
}
}
function muteVid() {
jQuery(".video-volume").find('i').toggleClass('fa-volume-off fa-volume-up');
if (video.muted){
video.muted = false;
} else {
video.muted = true;
}
}
</script>

And some custom CSS

/* Add some content at the bottom of the background section */
.video-controls {
position: relative;
margin-left: 20px;
top: 85%;
color: #f1f1f1;
width: 100%;
padding-left: 2%;
z-index: 3;
}
 
Last edited:
#13
added some css for mobile to hide the controls
@media only screen
and (min-device-width : 320px)
and (max-device-width : 768px) {
.video-controls {
display:none;
}
}