Playing a YouTube Video Inside the Dialog Component in ASP.NET MVC
This Knowledge base explains how to insert the YouTube video inside the dialog content. You can set the ContentType property as ‘iframe’ and load YouTube video into dialog content using the ContentUrl property. ContentType is used to load the dialog content at run time. The dialog content will be loaded from the URL specified in the ContentUrl property when ContentType is specified. Refer to the following code sample.
DialogFeatures.cshtml
@{
Html.EJ()
.Dialog("dialog")
.Title("Dialog with YouTube video")
.ContentType("iframe")
.Width("60%")
.Height("60%")
.ContentUrl("https://www.youtube.com/embed/ooV6qyVRQk8?autoplay=1")
.ActionButtons(new List<string> { "close", "minimize", "pin", "maximize" })
.Render();
}
Dynamically load a YouTube video into dialog content
Support has been provided to change the dialog content dynamically using the contentUrl property through setModel. Initially, the dialog control is rendered with the ContentType property and disabled the showOnInit property. Based on the button click, load the different YouTube videos into dialog content using the contentUrl property. Refer to the following code.
<div class="control" style="height:800px">
<div id="buttondiv"> // Render four buttons with click event
@Html.EJ().Button("btnOpen1").Text("Click to open video1").ClientSideEvents(evt => evt.Click("onclick"))
@Html.EJ().Button("btnOpen2").Text("Click to open video2").ClientSideEvents(evt => evt.Click("onclick"))
@Html.EJ().Button("btnOpen3").Text("Click to open video3").ClientSideEvents(evt => evt.Click("onclick"))
@Html.EJ().Button("btnOpen4").Text("Click to open video4").ClientSideEvents(evt => evt.Click("onclick"))
</div>
// Render dialog control
@{Html.EJ()
.Dialog("dialog")
.Title("Dialog with YouTube video")
.ContentType("iframe")
.Width("60%")
.Height("60%")
.ShowOnInit(false)
.EnableModal(true)
.ActionButtons(new List<string> { "close", "minimize", "pin", "maximize" })
.Render();
}
</div>
<script>
function onclick(e) { // Triggered when you click the buttons
var btnid = e.target.getAttribute("id"); //Get clicked button id
$("#dialog").ejDialog("open"); // Open the dialog control
$("#dialog").ejDialog("refresh"); // Refresh the dialog control
switch (btnid) {
case "btnOpen1":
$("#dialog").ejDialog({ contentUrl: "https://www.youtube.com/embed/ooV6qyVRQk8?autoplay=1" }); // Set contentUrl property through setModel
break;
case "btnOpen2":
$("#dialog").ejDialog({ contentUrl: "https://www.youtube.com/embed/K4Di2rvigVk?autoplay=1" });
break;
case "btnOpen3":
$("#dialog").ejDialog({ contentUrl: "https://www.youtube.com/embed/oA3yYLFNJ4Y?autoplay=1" });
break;
default:
$("#dialog").ejDialog({ contentUrl: " https://www.youtube.com/embed/dRX-50NjeoU?autoplay=1" });
break;
}
}
</script>
Result
