Displaying Embedded Video in a View

Question

How do you display embeded video as video (not the embed links as text pictured below)?

GitHub: https://github.com/DeanEverhart/ContosoUniverstiyEmbed

Environment: Net Core 6, Visual Studio Community 2022 (64 bit), WIndows 11

**
View**

@model IEnumerable<ContosoUniverstiyEmbed.Models.Student>

@{
    ViewData["Student"] = "Student";
}

<h1>Student</h1>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.LastName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FirstMidName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.EnrollmentDate)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FirstMidName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.EnrollmentDate)
            </td>
            <td>
                <a asp-action="Edit" asp-route-id="@item.ID">Edit</a> |
                <a asp-action="Details" asp-route-id="@item.ID">Details</a> |
                <a asp-action="Delete" asp-route-id="@item.ID">Delete</a>
            </td>
        </tr>
}
    </tbody>
</table>

Model

using System;
using System.Collections;
using System.Collections.Generic;


namespace ContosoUniverstiyEmbed.Models
{
    public class Student
    {
        public int ID { get; set; }
        public string? LastName { get; set; }
        public string? FirstMidName { get; set; }
        public DateTime? EnrollmentDate { get; set; }

        public ICollection<Enrollment>? Enrollments { get; set; }
    }
}

Answer 1

Hi @Dean Everhart, From the image you provided, You save the <iframe xxx></iframe> html code as string into database, Then you want to display it in the type of html code instead of text. So you can change your code like:

@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
                @Html.Raw(item.FirstMidName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.EnrollmentDate)
            </td>
            <td>
                <a asp-action="Edit" asp-route-id="@item.ID">Edit</a> |
                <a asp-action="Details" asp-route-id="@item.ID">Details</a> |
                <a asp-action="Delete" asp-route-id="@item.ID">Delete</a>
            </td>
        </tr>
}

@Html.Raw(xx) will Wraps HTML markup in an HtmlString instance so that it is interpreted as HTML markup. Now the View will show like

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Xinran Shen

Answer 2

See <video> tag.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video there are also many JavaScript players.