1. Go to Download JW Player and create an account. You don’t need to download anything, just confirm the account via e-mail and log in. Then go to the publish wizard on https://account.longtailvideo.com/wizard
2. Configure your movie there and copy the code parts given below the wizard. In this example, we’ll take the default code. Now paste the two parts (what should go in the head section and what should go in your page body) in a post in the HTML tab (pasting in the standard View tab will not work!). It should look like
<script type="text/javascript" src="https://jwpsrv.com/library/_YOUR_PERSONAL_KEY_.js"></script>
<div id='my-video'></div>
<script type='text/javascript'>
jwplayer('my-video').setup({
file: 'https://content.bitsontherun.com/videos/lWMJeVvV-364767.mp4',
image: 'https://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
width: '640',
height: '360'
});
</script>
3. Now save and check if the player is working in normal embedded mode. You should see it like this:
4. Go back to edit the post and hide the embedded movie by wrapping the placeholder div with id my-video like below. Notice that the inner wrapping div has a unique ID and a styling that matches the size of the movie you configured in the wizard before.
<div class='fancybox-hidden'><div id='video1' style='width:640px;height360px;overflow:hidden;'>
<div id='my-video'>Loading the player...</div>
</div></div>
5. Then create a link anywhere in that same page (except inside the hidden div!)
<a href="#video1" class="fancybox-inline">link</a>
6. Save and check the resulting page again. You should now no longer see the movie until you click the link :