In this article I will explain with an example, how to play (embed) YouTube Videos in HTML5 Video tag in HTML Page.
HTML5 Video tag is not meant to play videos from other domain URLs and hence it is not possible to play (embed) YouTube Videos in HTML5 Video tag.
Thus in order to play (embed) YouTube Videos in HTML Page, one of the following elements needs to be used:
1. IFRAME element.
2. EMBED element.
Play (Embed) YouTube Videos using IFRAME element in HTML Page
The following HTML Markup 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.
<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 = "https://www.youtube.com/embed/" + url;
$("#video").show();
});
</script>
Play (Embed) YouTube Videos using EMBED element in HTML Page
The following HTML Markup consists of an HTML TextBox, a Button and an EMBED 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 EMBED element.
<input type="text" id="txtUrl" style="width: 300px" />
<input type="button" id="btnPlay" value="Play" />
<hr />
<embed id="video" src="" wmode="transparent" type="application/x-shockwave-flash"
width="420" height="315" allowfullscreen="true" title="Adobe Flash Player"></embed>
<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 = "https://www.youtube.com/v/" + url;
});
</script>
Screenshot
![Play (Embed) YouTube in HTML5 Video tag]()
Demo
Downloads
