Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 26, 2016 at 1:32 pm #691614
    abortolotti

    Hey guys,

    I’m setting up this site which has a background video playing on the homepage:

    Home

    My client asks if it’s possible to add an audio option button as you see on this site:

    http://www.virginlimitededition.com/en/necker-island

    Is it possible? What code should I add?

    Thanks

    Antonio

    September 29, 2016 at 5:55 am #692952
    Ismael

    Hey Antonio,

    Thank you for using Enfold.

    Please add this in the functions.php file:

    add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
	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 css code to style the mute/unmute button:

    .custom-mute {
    display: block;
    background: red;
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 100px;
    right: 100px;
    z-index: 1000;
}

    At first, you’ll just see a red button so you have to get your own mute/unmute image and replace the background value.

    Best regards,
    Ismael

    September 29, 2016 at 6:29 am #692955
    abortolotti

    HI @Ismael,

    Thanks,I’ll check out what you suggest and let you know.
    Thank you for your help.
    Antonio

    September 29, 2016 at 8:57 am #692974
    abortolotti

    Hi again @ismael,

    where do I add the image? Can you help?

    I uploaded it in the media gallery and have the following url:

    http://it-software.it/demo/CasaMarAzulSanPancho/wp-content/uploads/2016/09/Untitled-design-3.png

    where do I put it in the code you gave me?

    Thanks

    September 29, 2016 at 10:00 am #693009
    Basilis

    Hi!

    You have to place the first code into functions.php file and the second one at the theme styles area.

    Please let us know if you work with it and you still have issues.

    Regards,
    Basilis

    September 29, 2016 at 10:02 am #693013
    abortolotti

    Hi @Basilis,

    Thanks for the input, that’s actually what I’ve done.

    My question relates to where do I put the image in such code.

    Thanks for your help.

    Antonio

    September 29, 2016 at 12:10 pm #693065
    abortolotti

    This code solved my issue:

    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 here’s what I added on the quickCSS:

    .custom-mute {
    display: block;
    background-image: url('../../../wp-content/uploads/2016/09/icon-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('../../../wp-content/uploads/2016/09/icon-mute.png');
}

@media only screen and (max-width: 1290px) {
.custom-mute {
    
    right: 190px;
    
}
}

    You guys are awesome!
    You can mark this as solved. Thanks

    September 30, 2016 at 9:21 am #693571
    Ismael

    Hey!

    Great! Glad we could help. Thanks for sharing. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Adding audio option on fullscreen background video?’ is closed to new replies.