51

Is it possible to embed an html5 version of a youtube video without using an iframe?

5
  • 2
    It's possible but not reliable - stackoverflow.com/questions/5157377/…. Here's the doc page (doesn't list the previous method): developers.google.com/youtube/player_parameters. Just out of interest, why don't you want to use youtube's iframe embed code?
    – Joe
    Commented Sep 10, 2013 at 18:44
  • 2
    @Joe I've been having memory usage issues with iframes on iOS, so was looking for an alternative.
    – andrewb
    Commented Sep 23, 2015 at 2:38
  • 2
    YouTube's documentation (as of now) states that iframes are the recommended method for embeds: developers.google.com/youtube/…. They've also deprecated alternate options, e.g. the <object> option. So it may be best to stick with <iframe>.
    – andrewb
    Commented Sep 23, 2015 at 2:39
  • I have also reason for this , i just want to use youtube videos for webgl texture rendering. I cant do it without src also i need to play it video html5 tag . @andrewb i will try with object tag . Commented Jun 5, 2017 at 11:39
  • 2
    @andrewb iframe contents are able to bypass the same-origin policy which means that you'd be giving google the means to access to your IndexedDB databases.
    – Michael
    Commented May 16, 2020 at 20:44

6 Answers 6

30

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>

7
  • to embed without Adobe Flash at all, use <object> tag
    – anapsix
    Commented Sep 11, 2014 at 18:49
  • this does not seem to work for iOS... it doesn't want to display the video at all. Does iOS not support <object>?
    – CJT3
    Commented Jan 7, 2015 at 2:19
  • 3
    @anapsix Actually looks like <object> has been deprecated. See here: developers.google.com/youtube/player_parameters?hl=en
    – andrewb
    Commented Sep 23, 2015 at 2:37
  • 1
    @anapsix Why there are multiple width and height css properties in style attribute of object tag?
    – Visruth
    Commented Dec 25, 2018 at 4:50
  • 1
    updated with working examples.. it's 2020 and <object> tag still works
    – anapsix
    Commented Jul 7, 2020 at 13:31
8

Yes. Youtube API is the best resource for this.

There are 3 way to embed a video:

  • IFrame embeds using <iframe> tags
  • IFrame embeds using the IFrame Player API
  • AS3 (and AS2*) object embeds DEPRECATED

I think you are looking for the second one of them:

IFrame embeds using the IFrame Player API

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&amp;rel=0&amp;hl=en_US&amp;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&amp;rel=0&amp;hl=en_US&amp;version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>

(replace yt-video-id with your video id)

JSFIDDLE

5
  • 14
    This still uses iframes to embed the video Commented Sep 10, 2013 at 18:58
  • 1
    @user2217162 Why would you like not to use iframe? Commented Sep 11, 2013 at 4:33
  • 37
    the question is about embedding an html5 youtube video "without iframe".
    – taseenb
    Commented Mar 3, 2014 at 11:21
  • See my answer for options w/o iframe Commented Jul 8, 2014 at 17:13
  • Well, I added an embed example not using iframe. If HTML5 is enabled, it will be used. If not it probably fallback in flash mode. Not sure if this is what OP wants. Commented Aug 18, 2014 at 5:02
3

Because of the GDPR it makes no sense to use the iframe, you should rather use the object tag with the embed tag and also use the embed link.

<object width="100%" height="333">
  <param name="movie" value="https://www.youtube-nocookie.com/embed/Sdg0ef2PpBw">
  <embed src="https://www.youtube-nocookie.com/embed/Sdg0ef2PpBw" width="100%" height="333">
</object>

You should also activate the extended data protection mode function to receive the no cookie url.

type="application/x-shockwave-flash" 

flash does not have to be used

Nocookie, however, means that data is still being transmitted, namely the thumbnail that is loaded from YouTube. But at least data is no longer passed on to advertising networks (as example DoubleClick). And no user data is stored on your website by youtube.

3
  • 3
    You should/need add an explication on how your code works
    – dippas
    Commented May 6, 2020 at 8:32
  • Please explain what is going on and what the url youtube-nocookie is doing. In the comments above it was said that flash is not neeed, so why is it needed here?
    – not2qubit
    Commented Oct 25, 2020 at 11:22
  • @dippas This is not a function but a video in Hypertext Markup Language that is called up in an HTML tag "how your code works" ? Here was the question how to integrate a YouTube video without an iframe. Commented Jan 27, 2021 at 12:10
2

Yes, but it depends on what you mean by 'embed'; as far as I can tell after reading through the docs, it seems like you have a couple of options if you want to get around using the iframe API. You can use the javascript and flash API's (https://developers.google.com/youtube/player_parameters) to embed a player, but that involves creating Flash objects in your code (something I personally avoid, but not necessarily something that you have to). Below are some helpful sections from the dev docs for the Youtube API.

If you really want to get around all these methods and include video without any sort of iframe, then your best bet might be creating an HTML5 video player/app that can connect to the Youtube Data API (https://developers.google.com/youtube/v3/). I'm not sure what the extent of your needs are, but this would be the way to go if you really want to get around using any iframes or flash objects.

Hope this helps!


Useful:

(https://developers.google.com/youtube/player_parameters)

IFrame embeds using the IFrame Player API

Follow the IFrame Player API instructions to insert a video player in your web page or application after the Player API's JavaScript code has loaded. The second parameter in the constructor for the video player is an object that specifies player options. Within that object, the playerVars property identifies player parameters.

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.

...

IFrame embeds using tags

Define an tag in your application in which the src URL specifies the content that the player will load as well as any other player parameters you want to set. The tag's height and width parameters specify the dimensions of the player.

If you are creating the element yourself (rather than using the IFrame Player API to create it), you can append player parameters directly to the end of the URL. The URL has the following format:

...

AS3 object embeds

Object embeds use an tag to specify the player's dimensions and parameters. The sample code below demonstrates how to use an object embed to load an AS3 player that automatically plays the same video as the previous two examples.

0

Use the object tag:

<object data="http://iamawesome.com" type="text/html" width="200" height="200">
  <a href="http://iamawesome.com">access the page directly</a>
</object>

Ref: http://debug.ga/embedding-external-pages-without-iframes/

0
0

Yes, You can Embed your youtube video without Iframe with two methods.

  1. Using Object
  2. Using Embed tag

I have explained this in detail on my blog you can read How to Embed YouTube video without Iframe

1
  • 1
    Provide context for links Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the external resource is unreachable or goes permanently offline. Links to other websites should always be helpful, but avoid making it necessary to click on them as much as possible. Have a look here for better answer: stackoverflow.com/help/how-to-answer Commented Jan 3 at 15:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.