In this article I will explain with an example, how to play (embed) YouTube Videos in ASP.Net MVC Razor.
The ID of the YouTube video will be extracted and the extracted YouTube Video ID is appended to the YouTube embed video URL which is ultimately assigned to HTML IFRAME element in ASP.Net MVC Razor.
Controller
The Controller consists of an Action method named Index. Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
View
The View consists of an HTML TextBox, a Button and an IFRAME element.
The Button has been assigned a jQuery click event handler. When the Button is clicked, first the YouTube Video URL is fetched from the TextBox and then YouTube Video ID is extracted from the URL.
The extracted YouTube Video ID is appended to the YouTube embed video URL and the URL is set to the SRC property of the HTML IFRAME element.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<input type="text" id="txtUrl" style="width:300px"/>
<input type="button" id="btnPlay" value="Play"/>
<hr/>
<iframe id="video" width="420" height="315" frameborder="0" style="display:none" allowfullscreen></iframe>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("body").on("click", "#btnPlay", function () {
var url = $("#txtUrl").val();
url = url.split('v=')[1];
$("#video")[0].src = "//www.youtube.com/embed/" + url;
$("#video").show();
});
</script>
</body>
</html>
Screenshot
![Play (Embed) YouTube Videos in ASP.Net MVC]()
Downloads
