YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar thomas.p Support asked

[Tutorial] Unmute YouTube background video

YouTube background videos will be embedded muted by default in YOOtheme Pro. To change this, follow these steps:

  • open the Website Builder to edit your section
  • set Style: Video and add the link to your YouTube Video in the field below

Image

  • click on the Advanced tba and add an ID to your section, e.g. bgvideo

Image

  • click on the <- (back arrow), save and click on the <- (back arrow) once more
  • go to Settings->Custom Code->SCRIPT and add the following scripts into that field

    <script src="https://www.youtube.com/iframe_api"></script>  
    <script>  
    jQuery(function(){jQuery('#bgvideo iframe').attr('id', 'ytplayer');});  
    var player;  
    function onYouTubeIframeAPIReady() {  
      player = new YT.Player('ytplayer', {  
        events: {  
          'onStateChange': onPlayerStateChange  
        }  
      });  
    }  
    function onPlayerStateChange() {  
        player.unMute();  
        player.setVolume(80);  
    }  
    </script>
    

Image

  • save
  • Tutorial
  • YOOtheme Pro

5 Answers

0

Avatar akmklc answered

What if its vimeo video? :)

0

Avatar thomas.p Support answered

Vimeo has a JavaScript API that should work more or less the same. However, there seems to be a bug with passing the player ID to the API. Therefore, I can't make it work.

See
Can't pass existing player to Vimeo.Player constructor if it's inside of other iframe
Vimeo bug, playing: true prop does not trigger video to play inside iframe (This is the same error I get.)

This is how it should work:

<script src="https://player.vimeo.com/api/player.js"></script>  
<script>  
    var iframe = document.querySelector('#bgvideo iframe');  
    var player = new Vimeo.Player(iframe);  

    player.on('loaded', function() {  
        player.setVolume(1); // you can set values from 0 to 1, e.g. 0.5  
    });  
</script>

or on play

<script src="https://player.vimeo.com/api/player.js"></script>  
<script>  
    var iframe = document.querySelector('#bgvideo iframe');  
    var player = new Vimeo.Player(iframe);  

    player.on('play', function() {  
        player.setVolume(1);  
    });  
</script>
0

Avatar michael.anlauf Support answered

Hello,

Update your theme to the actual version. Then just click the pencil icon right of the section name and add a video url into the Video field.

Regards, Michael

-1

Avatar john.vincent answered

I am using copper hill and the video option is not available. what are my option for adding video to the background of a section?

John

Know someone who can answer? Share a link to this question via email or twitter.