You’ve probably spent a lot of time thinking about what videos you want on your website and where they are going to be placed. When we start to think a little more about which videos our visitors are going to watch, we’ll want to pay more attention to how those videos become available to them.

You’re in luck because today I’m going to share with you a really nifty way to allow visitors to your page to choose which video they want to watch. By loading a player dynamically after the page has loaded, we gain some flexibility in choosing when and how the player is displayed.

Take a look at the simple example below. Go ahead and click the links for Video 1 and Video 2.

Notice how you were able to switch back and forth between the players without having to reload the entire page? This is, of course, a contrived example with two videos for demonstration purposes, but the solution scales out really easily to accommodate any number of players. It works particularly well in scenarios where you want to choose from a large number of players. That’s because we’re not actually loading the player when the page loads. In the example above, the players were being loaded when you clicked the link.

This means that the performance impact to the page is effectively zero but you’re still able to provide numerous viewing options to your visitors. Your web dev will thank you!

If you wanted to get a little more creative with this type of solution, you could hardwire this to a form, dropdown list or any other kind of navigational element to dynamically load a player without having to refresh the page. Most importantly, all of the Vidyard tracking remains in place, so we’ll be able to get all of our crunchy analytics with each video chosen by the visitor.

The good news is that this isn’t too difficult to implement and the JavaScript can be added sitewide without hurting anything if you don’t call it on a particular page. It’ll require a little bit of jQuery and you’ll need to find the UUIDs of the Vidyard players you want to embed.

Here’s the code for the example above:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
        function getEmbedCode(uuid) {
            var script=document.createElement('script');
            script.type='text/javascript';            
            script.id='vidyard_embed_code_'+uuid;
            script.src='https://play.vidyard.com/'+uuid+'.js?v=3.1&type=inline';   
            return script;
        }
        function changePlayer(modalid,uuid) {
            document.getElementById(modalid).innerHTML = "";
            $("#"+modalid).append(getEmbedCode(uuid));
        }
    </script>

	<ul>
    	<li><a href="javascript:void(0);" onclick="changePlayer('video_container_9RcFEGMolLKHMGxMCuMcWg','hedIuHeKRKySm1qx9xXV7w');">Video 1</a></li>
    	<li><a href="javascript:void(0);" onclick="changePlayer('video_container_9RcFEGMolLKHMGxMCuMcWg','9RcFEGMolLKHMGxMCuMcWg');">Video 2</a></li> 
    </ul>
    <div style="height: 360px;">
        <div id="video_container_9RcFEGMolLKHMGxMCuMcWg">
        	<script type="text/javascript" id="vidyard_embed_code_9RcFEGMolLKHMGxMCuMcWg" src="//play.vidyard.com/9RcFEGMolLKHMGxMCuMcWg.js?v=3.1&type=inline"></script>
        </div>
    </div>

Essentially, we’re constructing our standard inline embed code using the getEmbedCode() function, then using jQuery’s .append() function to add it to the page whenever and wherever we’d like. The Vidyard JavaScript embed code is executed when it’s added to the document which ensures that any player specific features (like CTAs) are put into place as well.

Dynamically loading a player has its perks when you consider how you can use it beyond simply loading a list of videos. Some reasons you might want to load a player on demand:

  • Pop a player dynamically into your own custom modal window without having to embed it at page load.
  • Load the player with a specific set of query strings to override the player settings depending on some criteria you choose after the page loads.
  • Hide the player load behind a splash screen so when the visitor clicks the image, it disappears and the player appears. This is great for inline embedding a large number of in-line players without having to load all of them at once!
  • Wait to load a player until after they scroll past the fold on your page.

Now you know how it’s done, so when are you going to load your player dynamically? Sound off in the comments!

Jivan Ramsahai