Play Embed Youtube videos in Iframe in Asp.Net MVC

Play an Youtube Video using Iframe from saved link in database.

1> Let Create a database table name as Youtube.

CREATE TABLE [dbo].[YouTube] (
    [Id]     INT            IDENTITY (1, 1) NOT NULL,
    [Name]   NVARCHAR (250) NULL,
    [Link]   NVARCHAR (MAX) NULL,
    [Status] BIT            NULL
);

2>Create a Model for  Youtube Table 

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;

namespace ItsMe.Areas.Admin.Models
{
    [Table("YouTube")]
    public class Youtube
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Link { get; set; }
        public bool Status { get; set; }

    }
}

3> Create a DbSet for Youtube Model and inherit class with DbContext.

using ItsMe.Areas.Admin.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls;

namespace ItsMe.Models
{
    public class DefaultConnection : DbContext
    {    
        public DbSet<Youtube> youtubeContext { get; set; }

    }
}


4> Create a  YoutubeController for Create edit delete and Youtube details.

using ItsMe.Areas.Admin.Models;
using ItsMe.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ItsMe.Areas.Admin.Controllers
{
    public class YouTubeController : Controller
    {
        DefaultConnection db = new DefaultConnection();
        public ActionResult Index()
        {
            return View(db.youtubeContext.ToList());
        }

        public ActionResult Create()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Create(Youtube model)
        {
            if (ModelState.IsValid)
            {
                db.youtubeContext.Add(model);
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(model);
        }

        public ActionResult Edit(int id)
        {
            return View(db.youtubeContext.Find(id));
        }

        [HttpPost]
        public ActionResult Edit(Youtube model)
        {
            var youtube = db.youtubeContext.Find(model.Id);
            if (ModelState.IsValid)
            {
                youtube.Link = model.Link;
                youtube.Name = model.Name;
                db.Entry(youtube).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(model);
        }

        public ActionResult Delete(int id)
        {
            return View(db.youtubeContext.Find(id));
        }

        [HttpPost]
        public ActionResult Delete(Youtube model)
        {
            var youtube = db.youtubeContext.Find(model.Id);
            if (ModelState.IsValid)
            {
                db.Entry(youtube).State = EntityState.Deleted;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(model);
        }

        public ActionResult YouTube(int id)
        {
            return View(db.youtubeContext.Find(id));
        }

    }
}

5>Create View for an Index.cshtml for Index action. for list Purpose

@model IEnumerable<ItsMe.Areas.Admin.Models.Youtube>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Link)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Status)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            <iframe width="20%" height="70%" src="//www.youtube.com/embed/@item.Link" frameborder="0" allowfullscreen></iframe>
            @Html.DisplayFor(modelItem => item.Link)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Status)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
            @Html.ActionLink("YouTube", "YouTube", new { id = item.Id })
        </td>
    </tr>
}

</table>

6> Run the project.

7> Create view for Create Action for an Insert the data to database.

8>Run the project

9> open the Youtube open the video according to your choice song  game or etc.
     Copy the link  from URL of the Browser According to give in the Image please follow the 
     steps.























































10> Insert the data in Create view according image Copy the Url as give above,
     
      Just paste :- 7roOy4YoKdM     in Link textBox     encrypted code




11>  Click Create to Save the data, Now see the Index page at the bottom row generate with Video , Name and Status.


12> Now Click YouTube link give in Index Page of right side with an arrow mark.


13>How to Configure Youtube Link  to be played in Iframe using embeded for an YoutubeAction.

Thank you.

Author : praneet kumar

Share this