Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Open Player on mouse click


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

Todd

JW Player Support Agent  
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.