This article explains how to create a Twitter Bootstrap Modal Popup Dialog and Play a YouTube Video using a HTML5 iframe.
Create a new project using "File" -> "New" -> "Project..." then select web "ASP.NET Web Forms Application". Name it "ModalPopup" as shown in the following figure:
![Create a new project]()
Now, use the following procedure.
![Package manager]()
Now type:
PM -> Install-Package bootstrap -Version 2.3.2
If installed successfully then it will look like this:
![Install successfully]()
Now, in the code behind file index.html use the following code.
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Twitter Bootstrap Creating Modals</title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/modal.js"></script>
</head>
<body>
<div class="well">
<div class="container">
<p class="text-info">
Twitter Bootstrap Modal Popup Dialog</p>
<div id="pop" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a><br />
<p class="text-success">
C# Corner Annual Conference 2014 Official Trailer</p>
</div>
<div class="modal-body">
<p>
<iframe width="100%" height="315" src="http://www.youtube.com/embed/KZ8q2jtrbcw"
frameborder="0" allowfullscreen></iframe>
</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-small" data-dismiss="modal">Close</a>
</div>
</div>
<p>
<a data-toggle="modal" href="#pop" class="btn btn-primary btn-small">Official Trailer</a></p>
</div>
</div>
</body>
</html>
Now run the page, it will look like the following. Click the Official Trailer button.
![run the page]()
Now, show in the Twitter Bootstrap Modal Popup Dialog and Play a YouTube Video.
![Twitter Bootstrap Modal Popup Dialog]()
I hope this article is useful. If you have any other questions then please provide your comments below.