Menu
Is it possible to embed an html5 version of a youtube video without using an iframe?
303
One of the simplest methods to embed a YouTube video in a web page without IFrame is by embedding the video using the HTML <object> tag. Simply provide the URL of the video to the <object> element's data property and set few other properties like, the width, height, and you are ready to go.
Use the embed Tag as an Alternative to Iframe in HTML We can embed media like PDF, image, audio, video, and web pages. The tag defines a container in which we can embed our desired content. The embed tag is a self-closing tag. We can use the src attribute to specify the URL of the web page to be embedded.
As others have mentioned you can also use the embed tag and the object tag but that's not necessarily more advanced or newer than the iframe. HTML5 has gone more in the direction of adopting web APIs to get information from cross domains.
Here is a example of embedding without an iFrame:
<div style="width: 560px; height: 315px; float: none; clear: both; margin: 2px auto;"> <embed src="https://www.youtube.com/embed/J---aiyznGQ?autohide=1&autoplay=1" wmode="transparent" type="video/mp4" width="100%" height="100%" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen title="Keyboard Cat" > </div>compare to regular iframe "embed" code from YouTube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/J---aiyznGQ?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>and as far as HTML5 goes, use <object> tag like so (corrected):
<object style="width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;" data="http://www.youtube.com/embed/J---aiyznGQ?autoplay=1"> </object>Yes. Youtube API is the best resource for this.
There are 3 way to embed a video:
<iframe> tagsDEPRECATED I think you are looking for the second one of them:
The HTML and JavaScript code below shows a simple example that inserts a YouTube player into the page element that has an id value of ytplayer. The onYouTubePlayerAPIReady() function specified here is called automatically when the IFrame Player API code has loaded. This code does not define any player parameters and also does not define other event handlers.
<div id="ytplayer"></div> <script> // Load the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // Replace the 'ytplayer' element with an <iframe> and // YouTube player after the API code downloads. var player; function onYouTubePlayerAPIReady() { player = new YT.Player('ytplayer', { height: '390', width: '640', videoId: 'M7lc1UVf-VE' }); } </script> Here are some instructions where you may take a look when starting using the API.
An embed example without using iframe is to use <object> tag:
<object width="640" height="360"> <param name="movie" value="http://www.youtube.com/embed/yt-video-id?html5=1&rel=0&hl=en_US&version=3"/ <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/> <embed width="640" height="360" src="http://www.youtube.com/embed/yt-video-id?html5=1&rel=0&hl=en_US&version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/> </object> (replace yt-video-id with your video id)
JSFIDDLE
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
