Integrating Microsoft Stream for video lessons

Integrating Microsoft Stream with Power Pages provides an effective and interactive way to deliver video content, such as training lessons, onboarding sessions, tutorials, or announcements, directly through your portal. Microsoft Stream, especially in its newer version (built on SharePoint and OneDrive), offers seamless integration capabilities using embed codes, secure access, and structured organization of video content.

This guide will walk you through the step-by-step process to embed Microsoft Stream video lessons into Power Pages, apply user-based access controls, and ensure the best experience for learning or training environments.

---

Benefits of Using Microsoft Stream in Power Pages

• Secure video delivery integrated with Microsoft 365 login
• Easy video management and categorization
• Supports transcripts, captions, and search inside videos
• Stream videos can be embedded in pages or displayed conditionally
• Provides analytics on viewer engagement

---

Prerequisites

1. Access to Microsoft Stream (on SharePoint)
2. Power Pages site with basic configuration
3. Videos uploaded and shared via Microsoft Stream
4. Portal access to Dataverse and user roles (if secure viewing is required)

---

Step-by-Step Integration

Step 1: Upload Videos to Microsoft Stream

1. Go to Microsoft Stream
2. Choose “Upload” → Select your video file
3. Set metadata like title, description, language, etc.
4. Set permissions:
   • Allow everyone in the organization OR
   • Share with specific users or groups

Note: Videos are stored in OneDrive/SharePoint under the hood.

---

Step 2: Get the Embed Code

1. After uploading, open the video.
2. Click the “Share” or “…” > Embed option
3. Copy the iframe embed code
   <iframe width="640" height="360" src="https://www.microsoftstream.com/embed/video/[VideoID]?autoplay=false" allowfullscreen></iframe>

---

Step 3: Add Embed Code to Power Pages

1. Go to Power Pages Studio → Select your site
2. Navigate to the page where you want to add the video
3. Insert a Text or HTML component
4. Paste the embed code into the HTML editor

If using Liquid or template-based layout:

<div class="video-container">
  <iframe width="100%" height="480" 
    src="https://www.microsoftstream.com/embed/video/[VideoID]?autoplay=false"
    allowfullscreen>
  </iframe>
</div>

Use CSS for responsiveness:

<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

---

Step 4: Secure Video Access (Optional)

• Ensure videos are shared only with users or groups who are also authenticated users in your portal.
• You can use Dataverse Web Roles to conditionally show content:

{% if user.roles contains 'Training User' %}
  <div class="video-container">
    <!-- Embed code here -->
  </div>
{% else %}
  <p>You do not have access to view this video.</p>
{% endif %}

---

Step 5: Organizing Videos by Course or Category

To build a full training portal experience:

1. Create a Dataverse table: Training Videos
   • Title, Description, Video Embed URL, Category, RoleAccess
2. Use a List component in Power Pages to show video titles by category
3. When a video is selected, redirect to a details page that dynamically loads the embed code.

Example:

<iframe src="{{ record.videoembedurl }}" width="100%" height="500" allowfullscreen></iframe>

---

Advanced Use Cases

Conditional Embedding Based on User Profile

Using logic in Liquid templates or JavaScript, restrict which video is shown based on user data, department, or progress.

Embedding Playlists

Create playlists in Stream and embed the collection in your Power Pages page.

Track Viewing Completion (Manual)

Use a Dataverse field like Video Viewed (Yes/No) and mark it complete after a user clicks or finishes the lesson (manual input or logic via JavaScript).

---

Best Practices

• Use responsive embeds for better mobile experience
• Label videos clearly with titles and context
• Ensure captioning and transcripts are turned on in Stream for accessibility
• Group videos into categories (beginner, intermediate, advanced) for user clarity
• Combine with Power Automate to trigger emails or certifications post video-viewing

---

Common Challenges

Challenge	Solution
Video not loading	Ensure correct sharing settings in Stream
No embed option	Ensure video is uploaded to Stream (not YouTube or third-party)
Access Denied	Check that users are logged in and have permissions to view the video