HTML widget: embedding a Youtube video

There are a number of ways to take advantage of our powerful HTML widget and one of them is to embed Youtube videos directly into your dashboard.

Acquire the embed code:

To get started, go the Youtube video that you would like to embed, click on “Share”, then “Embed” and copy the code from the text-field.  If you'd like to modify the formatting of the embed code -- i.e. change the video size or show player controls -- select the "Show More" dropdown and make your selections.

embed_youtube_video_1_02

Configuring the widget:

Now, login to AppInsights and select the "Custom Content" tile from the Services panel (blue "+" button).  From there, you can add an HTML widget to your dashboard by selecting the appropriate tile.

embed_youtube_video_2_02  embed_youtube_video_3_02

Once your new HTML widget appears, click on the small gear button at top right and select “Edit Widget Settings”. Before doing anything else, select the "Widget Settings" tab and (without checking any boxes) hit the blue "Save" button. Please note: you cannot add HTML to your new widget prior to entering the “Edit Widget Settings” menu and hitting the “Save” button.

embed_youtube_video_4_02

embed_youtube_video_5

Now that you've saved your widget settings to confirm your use of HTML, you can now begin adding your script.  To do so, hit the widget gear icon once again and select "Add Data".

embed_youtube_video_6_02

Any HTML code that is written in the text window that appears will be used to populate your widget...so let's start by pasting the following:

<style>
#myVideo1 {
width:100%;
height:99%;
}
</style>


This tag will allow you to make manual edits to your embed code, such as resizing the video. Now, add "id=myVideo1" after the word “iframe” in the embed code. When you are finished click the blue "Save" button. Your final code should look something like this:

<style>
#myVideo1 {
width:100%;
height:99%;
}
</style>

<iframe id=myVideo1 width="700" height="450" src="//www.youtube.com/embed/s5qnuvKt2Fc" frameborder="0" allowfullscreen></iframe>


embed youtube video 1

And this is what it would look like on a dashboard...

embed_youtube_video_7_02

Additional tips:

Youtube offers a wide variety of options for video playback. For example, you can set the video to auto play by pasting ?&autoplay=1 after the URL but before the end quote:

<iframe id=myVideo1 width="700" height="450" src="//www.youtube.com/embed/s5qnuvKt2Fc?&autoplay=1" frameborder="0" allowfullscreen></iframe>

Or make the video auto loop by appending &loop=1&playlist= [video ID]:

<iframe id=myVideo1 width="700" height="450" src="//www.youtube.com/embed/s5qnuvKt2Fc?&autoplay=1&loop=1&playlist=s5qnuvKt2Fc" frameborder="0" allowfullscreen></iframe>

You can find more options such as adding captions and caption languages here: https://support.google.com/youtube/answer/171780?hl=en&ref_topic=3014330

Was this tutorial helpful?  Please take a moment to submit your “Yes” or “No” answer below!  You can also contact us or post a public question for further instruction.

Did you find this article helpful?