Title: Trigger video with custom button
Last modified: August 21, 2016

---

# Trigger video with custom button

 *  Resolved [sukritd](https://wordpress.org/support/users/sukritd/)
 * (@sukritd)
 * [13 years ago](https://wordpress.org/support/topic/trigger-video-with-custom-button/)
 * Hi,
 * Firstly, wonderful plugin! I have a couple of questions, as I try to make things
   work according to my requirements.
 * 1. Despite adding an autoplay=false, the video is played automatically on page
   load.
 * 2. I want to have a background image on the page, with a button that the users
   can then click to play my video as a background. I have the button in place and
   the rest working. However, I am unable to figure out how I can trigger the video
   from my custom button.
 * Thanks a bunch,
    Sukrit
 * [http://wordpress.org/extend/plugins/wpmbytplayer/](http://wordpress.org/extend/plugins/wpmbytplayer/)

Viewing 12 replies - 1 through 12 (of 12 total)

 *  Plugin Author [pupunzi](https://wordpress.org/support/users/pupunzi/)
 * (@pupunzi)
 * [13 years ago](https://wordpress.org/support/topic/trigger-video-with-custom-button/#post-3803187)
 * Hi,
    Actually the component force the autoplay parameter to true if the video
   is instanced as background. You can see the code on the mbYTPlayer.php page at
   line 207. If you need a different behavior fill free to change it but remember
   that it will be overwritten with the next update.
 * The WP component is based on the stand alone jquery plug-in ([http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer/](http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer/));
   see its documentation to know how to instance all the methods available to control
   the video player:
    [https://github.com/pupunzi/jquery.mb.YTPlayer/wiki](https://github.com/pupunzi/jquery.mb.YTPlayer/wiki)
 * Bye,
    Matteo
 *  Thread Starter [sukritd](https://wordpress.org/support/users/sukritd/)
 * (@sukritd)
 * [13 years ago](https://wordpress.org/support/topic/trigger-video-with-custom-button/#post-3803188)
 * Hi Matteo,
 * Thanks a ton for a quick reply. Will check out the links and the code as suggested.
 * Cheers,
    Sukrit
 *  Thread Starter [sukritd](https://wordpress.org/support/users/sukritd/)
 * (@sukritd)
 * [13 years ago](https://wordpress.org/support/topic/trigger-video-with-custom-button/#post-3803205)
 * Hey there.
 * Thanks for the tip. Have managed to implement both things.
 * However, still stuck on one small issue. The video is playing from my custom 
   button. However, I am unable to force it to go onto fullscreen on play.
 * I used the following code to get the video to play. However, despite adding “`.
   fullScreen()`“
    I could not force the fullscreen. I think I went through most
   of the documentation of the Wiki and other related google searches with no luck
   so far.
 * `<button class="command" onclick="jQuery('#bgndVideo1').getPlayer().playVideo()"
   >`
 * Thanks again,
    Sukrit
 *  Plugin Author [pupunzi](https://wordpress.org/support/users/pupunzi/)
 * (@pupunzi)
 * [13 years ago](https://wordpress.org/support/topic/trigger-video-with-custom-button/#post-3803210)
 * Hi,
    Actually there’s no public method to set the fullscreen state. You can create
   your own function and call it after the player start: the function:
 *     ```
       $.fn.fullscreen = function() {
       	var YTPlayer = this.get(0);
       	if (!YTPlayer.isAlone) {
       		if (YTPlayer.player.getPlayerState() == 1) {
       			jQuery(YTPlayer.wrapper).css({zIndex: 10000}).CSSAnimate({opacity: 1}, 1000, 0);
       			jQuery(this).html(jQuery.mbYTPlayer.controls.showSite)
       			YTPlayer.isAlone = true;
       		}
       	} else {
       		jQuery(YTPlayer.wrapper).CSSAnimate({opacity: YTPlayer.opt.opacity}, 500);
       		jQuery(YTPlayer.wrapper).css({zIndex: -1});
       		jQuery(this).html(jQuery.mbYTPlayer.controls.onlyYT)
       		YTPlayer.isAlone = false;
       	}
       };
       ```
   
 * the call:
    `jQuery('#bgndVideo1').fullscreen();`
 * Bye,
    Matteo
 *  Thread Starter [sukritd](https://wordpress.org/support/users/sukritd/)
 * (@sukritd)
 * [13 years ago](https://wordpress.org/support/topic/trigger-video-with-custom-button/#post-3803231)
 * Thanks again Matteo. Works quite well.
 * Without sounding ungrateful, can I ask you one more tiny bit of help?
 * So now video plays and goes in full screen. However, I seem to need to click 
   on the button twice, which is a bit annoying. I tried a few things with no luck.
 * I have the two functions daisy-chained, like this:
 * `onclick="jQuery('#bgndVideo1').getPlayer().playVideo();jQuery('#bgndVideo1').
   fullscreen();"`
 * Grazie mille 🙂
    Sukrit
 * PS: you’re really great with your support!
 *  Plugin Author [pupunzi](https://wordpress.org/support/users/pupunzi/)
 * (@pupunzi)
 * [13 years ago](https://wordpress.org/support/topic/trigger-video-with-custom-button/#post-3803233)
 * To make things work you should set the video to fullscreen when it is really 
   started. The YTPlayer component trigger an event for each player states (buffering,
   paused, stop, start). You should then fire the fullscreen function on the start
   event.
    Here is the code:
 *     ```
       <button onclick="jQuery('#bgndVideo1').playYTP(); jQuery('#bgndVideo1').one('YTPStart',function(){jQuery('#bgndVideo1').fullscreen()})">fullscreen</button>
       ```
   
 * Bye,
    Matteo
 *  Thread Starter [sukritd](https://wordpress.org/support/users/sukritd/)
 * (@sukritd)
 * [13 years ago](https://wordpress.org/support/topic/trigger-video-with-custom-button/#post-3803234)
 * Hi Matteo. Perfect solution. Works like a charm. I hope this helps others as 
   well.
 * Cheers,
    Sukrit
 *  Thread Starter [sukritd](https://wordpress.org/support/users/sukritd/)
 * (@sukritd)
 * [13 years ago](https://wordpress.org/support/topic/trigger-video-with-custom-button/#post-3803284)
 * Hi Matteo,
 * As I mentioned earlier, the code above is working perfectly on my computer, which
   is a Mac. However, it does not appear to be working on Windows computers. What
   happens when the user clicks on the button to play and set the video to fullscreen
   is that only the first action seems to be working. Any idea what can be done 
   to to fix this issue?
 * Thanks,
    Sukrit
 *  Plugin Author [pupunzi](https://wordpress.org/support/users/pupunzi/)
 * (@pupunzi)
 * [13 years ago](https://wordpress.org/support/topic/trigger-video-with-custom-button/#post-3803285)
 * Hi,
    I tested the demo page I did for you a PC with Windows 7 Ultimate on FF,
   Chrome, IE9 and IE10 and it worked perfectly. Give me an URL where I can see 
   what is going on for you. Bye, Matteo
 *  Thread Starter [sukritd](https://wordpress.org/support/users/sukritd/)
 * (@sukritd)
 * [13 years ago](https://wordpress.org/support/topic/trigger-video-with-custom-button/#post-3803287)
 * Hi,
 * Here’s the address: old-continent.eu [pass: admin1324]. I think the problem is
   with JS part:
 * `onclick="jQuery('#bgndVideo1').playYTP(); jQuery('#bgndVideo1').one('YTPStart',
   function(){jQuery('#bgndVideo1').fullscreen()})`
 * Thanks,
    Sukrit PS: can you please remove this comment once you have read the
   message
 *  Plugin Author [pupunzi](https://wordpress.org/support/users/pupunzi/)
 * (@pupunzi)
 * [13 years ago](https://wordpress.org/support/topic/trigger-video-with-custom-button/#post-3803288)
 * Hi,
    I can’t remove your post as I don’t have permission to. You maybe can edit
   it removing the sensible data.
 * I just tested your site on a PC with Windows 7 Ultimate on FF, Chrome, IE9 and
   IE10 and it is working fine for me…
 * Which os where you testing with?
    Did you clear the cache?
 * Bye,
    M
 *  Thread Starter [sukritd](https://wordpress.org/support/users/sukritd/)
 * (@sukritd)
 * [13 years ago](https://wordpress.org/support/topic/trigger-video-with-custom-button/#post-3803290)
 * Hi,
 * Looks like it was indeed an issue with cache. As I don’t own a Windows computer
   I was depending on a friend to test it for me. However, when I tested it on several
   Windows 7+ computers with IE 9/10 and Firefox 21 it worked just fine.
 * Thanks again,
    Sukrit

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Trigger video with custom button’ is closed to new replies.

 * ![](https://ps.w.org/wpmbytplayer/assets/icon.svg?rev=1544312)
 * [mb.YTPlayer for background videos](https://wordpress.org/plugins/wpmbytplayer/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wpmbytplayer/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wpmbytplayer/)
 * [Active Topics](https://wordpress.org/support/plugin/wpmbytplayer/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wpmbytplayer/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wpmbytplayer/reviews/)

## Tags

 * [background video](https://wordpress.org/support/topic-tag/background-video/)

 * 12 replies
 * 2 participants
 * Last reply from: [sukritd](https://wordpress.org/support/users/sukritd/)
 * Last activity: [13 years ago](https://wordpress.org/support/topic/trigger-video-with-custom-button/#post-3803290)
 * Status: resolved