Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #869185

    Hi guys,
    I want to add audio option on fullscreen background video, that will be allow to mute/unmute sound. I found a solution in this topic https://kriesi.at/support/topic/adding-audio-option-on-fullscreen-backgroundvideo/ . Eventually I have a red button how described in topic but it doesn`t work. I mean sound is not switching on/off.
    I try to get sound functionality like in this site http://www.virginlimitededition.com/en/necker-island
    Can you help me to find a solution of this issue please? Thanks.

    #870112

    Hey Kaspardk,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    #892050

    https://kriesi.at/support/topic/adding-audio-option-on-fullscreen-backgroundvideo/
    This topic is unavailable((
    So, any ideas how can I do this like here:
    http://www.virginlimitededition.com/en/necker-island
    Thank you in advance.

    #892991

    Hi,

    https://kriesi.at/support/topic/layerslider-fullscreen-video/
    Have you checked the topic here?

    Best regards,
    Basilis

    #895213

    Thank you for answer, Basilis!
    I checked this topic.

    https://jsfiddle.net/6cc9mhbb/23/?utm_source=website&utm_medium=embed&utm_campaign=6cc9mhbb

    Please, could you help me, how can I use this construction for background video in color section?

    1.
    Code block inside color section with background video:
    <button class=”mute-video”>toggle</button>
    <script charset=”utf-8″ type=”text/javascript” src=”my site/video.js”></script>

    2.
    custom.css:
    .mute-video {
    background:url(http://cdn.flaticon.com/png/64/60750.png) no-repeat center;
    background-size:32px;
    border:0;
    width:32px;
    height:32px;
    text-indent:-999px;
    }
    .unmute-video {
    background:url(http://cdn.flaticon.com/png/64/498.png) no-repeat center;
    background-size:32px;
    }

    3.
    video.js:
    $(“video”).prop(‘unmuted’, true);

    $(“.mute-video”).click(function () {
    if ($(“video”).prop(‘muted’)) {
    $(“video”).prop(‘muted’, false);
    $(this).addClass(‘unmute-video’);

    } else {
    $(“video”).prop(‘muted’, true);
    $(this).removeClass(‘unmute-video’);
    }
    console.log($(“video”).prop(‘muted’))
    });

    But this construction doesn’t work (like example in jsfiddle.net) for background video in color section.

    #896486

    Hi,

    The snippet is not going to work because the selectors are invalid. Please refer to the following thread instead.

    // https://kriesi.at/support/topic/adding-audio-option-on-fullscreen-background-video/

    Best regards,
    Ismael

    #896534

    Thank you, Ismael.
    The topic ‘Adding audio option on fullscreen background video?’ is closed to new replies.
    So I’m writing here.

    I add this in the functions.php file:

    add_action('wp_footer', 'ava_custom_script');
    function ava_custom_script(){
    	?>
    	<script type="text/javascript">
    	(function($) {
    
    		$('.av-section-color-overlay-wrap').on('click', '.custom-mute', function() {
    				$(this).toggleClass("icon-sound-on");
    				
    				
    			});
    		
    
    		function a() {
    			$('.av-section-color-overlay-wrap').prepend('<div class="custom-mute"></div>');
    			$('.av-section-color-overlay-wrap').on('click', '.custom-mute', function() {
    				$('#top .mejs-controls .mejs-volume-button button').trigger('click');
    
    			});
    		}
    
    		a();
    	})(jQuery);
    	</script>
    	<?php
    }

    And this to custom.css:

    .custom-mute {
    	display: block;
    	background-image: url('my site/unmute.png');
    	background-size: 48px;
    	width: 48px;
    	height: 48px;
    	position: absolute;
    	bottom: 50px;
    	right: 10px;
    	z-index: 1000;
    }
    .custom-mute:hover {
    	opacity: 0.5;
    }
    
    .icon-sound-on {
    	background-image: url('my site/mute.png');
    }
    
    @media only screen and (max-width: 1290px) {
    .custom-mute {
    	right: 190px;
    }
    }

    But this code doesn’t work((
    I can press the button and it changes, but there is no sound in background video((
    Look Private Content, please.

    #896813

    Hi,

    It’s not working because the video is from youtube. Please try to use mp4 video instead.

    $('#top .mejs-controls .mejs-volume-button button').trigger('click');
    

    The line above triggers the html5 video audio button which is why you need to use mp4 video.

    Best regards,
    Ismael

    #897446

    Thank you, Ismael.
    Hm… Do you have any ideas how it works with youtube video?
    Because I have no direct mp4 video.

    #897795

    Hi,

    I’m sorry but we can’t manipulate the youtube controls externally. Please use an mp4 video. This is actually not needed anymore because you can already mute an entire page in the browser tab.

    Best regards,
    Ismael

    #897959

    Thak you, Ismael.

    #898310

    Hi,

    Alright. Please feel free to open a new thread if you need anything else. Have a nice day! :)

    Best regards,
    Ismael

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Adding button to mute/unmute audio on fullscreen background video’ is closed to new replies.