Articles in this section

See more

Load Embed Code Based On Screen Width

Avatar
Brendan O'Driscoll
  • Updated

Not all screen sizes are created equal, meaning that the embed type that works well on your desktop may not look as good on your tablet. By using a little bit of Javascript, you can change up which embed code you want to use at which device window sizes. The following code is set up to embed using the lightbox if the window size is above 800px wide but to use the inline embed if the window size is below 800px wide.

Note: Don't forget to swap out all instances of [UUID] with a valid UUID.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
    //grab window size
    var win_size = $(window).width();
    console.log(win_size);
    //if window size is below 800px, load inline player
    if (win_size < 800){
        // Replace [UUID] with the UUID of the player you are attemping to embed.
        // To find the UUID of a player, see http://support.vidyard.com/articles/Public_Support/Find-the-UUID-for-your-player/
        var embedScript=document.createElement('script');
        embedScript.type='text/javascript';
        embedScript.id='vidyard_embed_code_[UUID]';
        embedScript.src='//play.vidyard.com/[UUID].js?v=3.1.1&type=inline';
        $(document).ready(function(){
            $("#[UUID]").append(embedScript);
        });}
        // Replace [UUID] with the UUID of the player you are attemping to embed.
        // To find the UUID of a player, see https://knowledge.vidyard.com/hc/en-us/articles/360009868634-Find-the-UUID-for-your-player
        else{var embedScript=document.createElement('script');
        embedScript.type='text/javascript';
        embedScript.id='vidyard_embed_code_[UUID]';
        embedScript.src='//play.vidyard.com/[UUID].js?v=3.1.1&type=lightbox';
        $(document).ready(function(){
            $("#[UUID]").append(embedScript);
            /* When adding the UUID to the function name "fn_vidyard_[UUID]" in the line below, replace any dashes (-) with dollar signs ($) e.g. fn_vidyard_arlhtoDOr-y4rGm-eXnOFA becomes fn_vidyard_arlhtoDOr$y4rGm$eXnOFA */
            $("#[UUID]").append("<div class='outer_vidyard_wrapper'><div class='vidyard_wrapper' onclick='fn_vidyard_[UUID]();'><img alt='Homepage video' width='360' src='//play.vidyard.com/[UUID].jpg?' /><div class='vidyard_play_button'><a href='javascript:void(0);'></a></div></div></div>");
        });}
        </script>
    </head>
    <body>
                <div id="[UUID]">
                <!-- Vidyard Javascript embed will be placed here -->
            </div>
    </body>
    </html>

Related articles