Open Player on mouse click

n... — Apr 20, 2014 06:50AM EDT

I would like to be able to open the JWPlayer in full-screen mode when an element is clicked on the page.

My specific requirements are as follows:

1) Initially show the video/image as a small element (e.g. 150px by 100px) embedded within other HTML content on the page.

2) When the user clicks on the video (to play it), I would like to either:

i) Create a screen overlay and then play a larger version of the video on that
overlay, similar to an image light box effect, or...
ii) Simply open the video in full-screen mode.

Is this possible with the standard player? Perhaps you could point me in the right direction?

Thank you.

1 Community Answers

Up Down

Todd

JW Player Support Agent

Apr 21, 2014 11:21AM EDT 0 rated :

Hi,

Yes, you can use our API onPlay() call in combination with resize() to achieve this. You could also implement your lightbox effect via Javascript and CSS within onPlay() as well.

Here’s the general idea:

<div id="video">Loading the player …</div>

<br> <script type='text/javascript'>
jwplayer(‘video’).setup({
file: ‘bunny.mp4’,
image: ‘bunny.jpg’,
width: ‘150px’,
height: ‘100px’
});

jwplayer(‘video’).onPlay(function(){
//code for lightbox effect goes here
jwplayer(‘video’).resize(‘100%’,‘600px’);
});
</script>

Hope this helps,
Todd

This question has received the maximum number of answers.