Embedding video

This article provides guidance on embedding video content in your article by using an embedded player. Embedding a video might be a good option if you prefer to keep the reader on your page, rather than providing a link to watch the video on another site or page. For information about the various types and professional creation of video, see the style guidelines for video.

Note

Organizations in Microsoft might have different standards for naming media files, for placing the files within repositories or on streaming media services, and for referencing those files. The following sections provide a best-practice approach, with organization-specific guidance where appropriate. Consider using the MP4/H.264 video format when possible, because it's the most universally compatible across all major modern browsers.

Planning

The primary factors that you should consider when embedding video include:

  • Where the video is hosted/sourced.
  • The available media formats.
  • The available video players.

In addition to the browser that readers of your article use, the video host and supported media formats will drive your choice of video player. This is not an exhaustive list, but it covers some popular combinations for the sake of demonstration:

Player Media format Channel 9 YouTube
(recommends iframe)
SharePoint Online (intranet only) Guidance
Docs
[!VIDEO] extension
Determined by host Supported Supported Not supported Required for Azure conceptual articles. Requires a URL to the video that also specifies the host's embeddable player.
HTML5
<video> element
MP4, WebM, Ogg Supported Not supported Limited Supported in current versions of all popular browsers. Requires a URL to the video file. SharePoint videos might require pre-authentication to the SharePoint site.
HTML
<iframe> element
Determined by host Supported Supported Limited Requires a URL to the video that's using the host's embeddable player. SharePoint videos might require pre-authentication to the SharePoint site.

Embedding a video by using the Docs [!VIDEO] Markdown extension

The Docs site team provides its own [!VIDEO] Markdown extension. It creates the corresponding HTML that's required to play the video via the HTML5 <video> element.

Examples

The following example demonstrates a video hosted on Channel 9:

> [!VIDEO https://channel9.msdn.com/Shows/Azure-Friday/Scott-Guthries-demos-Windows-Azure-Active-Directory-in-the-Cloud/player]

The following example demonstrates a video hosted on YouTube:

> [!VIDEO https://www.youtube.com/embed/iAtwVM-Z7rY]

Azure conceptual articles (Microsoft employees)

Important

Although conceptual articles for Azure services have migrated to docs.microsoft.com, videos used in them must continue to be uploaded to Channel 9 and the ACOM video gallery at this time. Please use the following steps to ensure that your video is properly uploaded and published to both Channel 9 and the ACOM video gallery. Use the Docs [!VIDEO] Markdown extension to embed the video in your article.

  1. For instructions on how to upload and publish a video on Channel 9, see Publishing Videos to Channel 9 for Azure.Microsoft.com as prepared by the ACOM web team. The article walks you through the entire process of uploading or updating a video, asynchronous encoding (with email notification upon completion), and publishing to the Channel 9 site.

  2. Import videos into the ACOM video gallery so they can be used with the ACOM video extension. For details, see Import Videos to Azure.Microsoft.com Video Center.​ You will have to wait for a video approver to review and approve the integration request. After the video is ready, you will receive an email notification and you can begin using the ACOM embedded player in your article.

Embedding a video by using the HTML5 video element

This section provides general guidance on using the HTML5 <video> element to embed video.

Examples

The following example demonstrates a video hosted on Channel 9:

<video width="640" height="360" controls poster="http://video.ch9.ms/ch9/5b1a/63235d77-14c0-4cbd-89f1-84f39c7d5b1a/scottguazureactivedirectory.mp4" >  
  <source src="http://video.ch9.ms/ch9/5b1a/63235d77-14c0-4cbd-89f1-84f39c7d5b1a/scottguazureactivedirectory.mp4" type="video/mp4" />  
</video>

The following example demonstrates a video hosted on SharePoint Online:

<video width="640" height="360" controls poster="media/contribute-how-to-write-video/voice1-intent-poster.png">  
  <source src="https://microsoft.sharepoint.com/teams/CE_CSI/Shared%20Documents/CSI%20Voice/CSIVoice1Intent.mp4" type="video/mp4" />  
</video>

Embedding a video by using an HTML iframe element

The <iframe> element supports any host that provides a video player that can be hosted within an iframe on your page. The player is determined by the host, because the host controls the HTML within the frame. So the URL that you use represents both the video and the host's embeddable player.

When you're using an iframe element, consider the following steps to make the video scalable for responsive UI:

  1. Use a div to make the video 100% wide, and make the width-to-height ratio 16:9 (that is, height is 56.25% of width).
  2. Use an iframe within the div to host a video.

Examples

The following example demonstrates a video hosted on Channel 9:

<div style="padding-top: 56.25%; position: relative; width: 100%;">
<iframe style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;" width="100%" height="100%" src="https://channel9.msdn.com/Shows/Azure-Friday/Scott-Guthries-demos-Windows-Azure-Active-Directory-in-the-Cloud/player" frameborder="0" allowfullscreen></iframe>
</div>

The following example demonstrates a video hosted on YouTube:

<div style="padding-top: 56.25%; position: relative; width: 100%;">
<iframe style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;" width="100%" height="100%" src="https://www.youtube.com/embed/iAtwVM-Z7rY" frameborder="0" allowfullscreen></iframe>
</div>

The following example demonstrates how to embed a video hosted on SharePoint Online:

<div style="padding-top: 56.25%; position: relative; width: 100%;">
<iframe style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;" width="100%" height="100%" src="https://microsoft.sharepoint.com/teams/CE_CSI/_layouts/15/videoembedplayer.aspx?site=9539fdaa1d2644adb41b9f587a5678af&amp;web=fd5837881b2940e499dd87a2449ecce0&amp;list=b6933fc86e7e4e2086d60c963b60b552&amp;item=2802&amp;img=https%3A%2F%2Fmicrosoft%2Esharepoint%2Ecom%2Fteams%2FCE%5FCSI%2FShared%20Documents%2FCSI%20Voice%2Fvoice1%2Dintent%2Dposter%2Epng&amp;title=1" frameborder="0" allowfullscreen></iframe>
</div>

Metrics

For videos embedded in Azure articles, we see significantly more views for the Channel 9 pages for each video than to the azure.microsoft.com pages that host the Channel 9 videos.

You can look in your Channel 9 Admin dashboard for videos with you tagged as an owner. In your Channel 9 Admin dashboard, select Reports to go to the Channel 9 Reporting site and get more data.

  • For general Markdown-related guidance, refer to the main Markdown article.
  • For style-related guidance geared toward art creation, see Visuals style for video.
  • For more details on using the HTML5 <video> element​, see Adding an HTML5 video control to your webpage.​
  • Resources for Microsoft C+E employees:

    • If you can't find a specific answer/resource, send an email to the C+E CSIVideo@microsoft.com alias.
    • The process for effective localization of closed captions for Channel 9 video--though expensive--is as follows if you need it:

      1. Publish the video to Channel 9.
      2. Give administrative rights to the user: videolocalization@hotmail.com.
      3. Send an e-mail to Cloud & Enterprise International FTE PS csiintlfte@microsoft.com, requesting localization of closed captions.
      4. Depending on the length of your video, it can take 1-3 days for the closed captions to be created, localized, and published.