Embedding video in your content

This topic provides guidance on embedding video content into your article, using an embedded player directly within your article. Embedding a video might be a better option for you, if you prefer to keep the reader on your page rather than linking off page to watch the video on another site/page. For more information on guidance related to the various types and professional creation of video, please see the visuals style guide for video guidance in the Style guide.

Note

Different organizations within Microsoft may have different standards for naming media files, their placement within their repositories or on streaming media services, and thus, referencing those files. The following sections will provide a best-practice approach, with organization-specific guidance where appropriate. You should consider using MP4/H.264 video format when possible as it is the most universally compatible across all major modern browsers.

Planning

The primary factors you should consider when embedding video include:

  1. Where the video is hosted/sourced
  2. The media formats available
  3. The video players available

In addition to the browser being used by readers of the article, the video host and supported media format(s) will drive the choice of video player available to you. This is not an exhaustive list, but it covers some popular combinations for demonstration sake:

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 may require pre-authentication to the SharePoint site.
HTML
<iframe> element
Determined by host Supported Supported Limited Requires a URL to the video using the host's embeddable player. SharePoint videos may require pre-authentication to the SharePoint site.

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

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

Examples

The following example demonstrates a video hosted on Channel9:

> [!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

While conceptual articles for Azure services have migrated to Docs.Microsoft.Com, videos used in them need to continue to be uploaded to Channel9 and the ACOM video gallery at this time. Please follow the steps below to ensure your video is properly uploaded/published to both Channel9 and the ACOM video gallery, and 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 Channel9 for Azure.Microsoft.com as prepared by the ACOM web team. This article will walk you through the entire process of uploading/updating a video, asynchronous encoding (with email notification upon completion), and publishing onto the http://channel9.msdn.com site.

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

Embedding a video 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 Channel9:

<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 using an HTML iframe element

The <iframe> element supports any host that provides a video player which can be hosted within an iframe in your page. The player is therefore determined by host as it controls the actual HTML within the frame, so the URL you use represents both the video and the host's embeddable player.

When using an iframe element, please also consider the following in order to make the video scaleable for responsive UI:

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

Examples

The following example demonstrates a video hosted on Channel9:

<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 Channel9 Admin dashboard for videos with you tagged as an owner. In your Channel9 Admin dashboard, click Reports to go to the Channel9 Reporting site with more data.

  • Please refer to the main Markdown article for general Markdown-related guidance
  • For style-related guidance geared toward art creation, please see Visuals style for video
  • See Adding an HTML5 video control to your webpage for more details on using the HTML5 <video> element​
  • 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.
    • Although expensive, if required here is the process for effective localization of closed captions for Channel9 video:

      1. Publish the video to channel 9 -- see step 2 under [Embedding video for Azure services]
      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.