WordPress.org

Support

Support » Plugins and Hacks » mb.YTPlayer for background videos » [Resolved] Trigger video with custom button

[Resolved] 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/

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author pupunzi

    @pupunzi

    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/); 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

    Bye,
    Matteo

    Hi Matteo,

    Thanks a ton for a quick reply. Will check out the links and the code as suggested.

    Cheers,
    Sukrit

    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

    @pupunzi

    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

    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

    @pupunzi

    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

    Hi Matteo. Perfect solution. Works like a charm. I hope this helps others as well.

    Cheers,
    Sukrit

    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

    @pupunzi

    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

    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

    @pupunzi

    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

    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 ‘[Resolved] Trigger video with custom button’ is closed to new replies.
Skip to toolbar