YouTube introduced IFrame embeds back in July 2010 that will eventually allow embedded videos to work on mobile devices, especially those that do not support Flash. The object embeds still exist but IFrame embeds have seem to become the "recommended" method for embedding a YouTube player because they automatically select the appropriate player based on the device capabilities and available YouTube file formats. As a matter of fact, the IFrame API is not experimental anymore; so if you want to enhance your embedded player with JavaScript, IFrame embeds allow you to do just that.
In March 2012, YouTube introduced a number of enhancements around list playback functionality that allow you to embed playlists, user uploads and searches in your webpages. In the rest of this article I'll show you how to use simple, no-JavaScript, IFrame embeds that load a single video or a playlist.
Note that most of the functionality I am about to discuss is also available in the object embeds.
Single Video
The embed code for a video can be copied from its watch page on YouTube. The embed code looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/T0Jqdjbed40?rel=0" frameborder="0" allowfullscreen></iframe>
If necessary, you can change the appearance and behavior of the player by appending parameters to the IFrame URL. For example, you can specify the rel parameter to control whether related videos are shown at the end of video. Other useful parameters include:
autoplay: sets whether the initial video plays automatically when player loads. Possible values are0(default) and1.showinfo: sets whether video information (e.g. video title, playlist thumbnails) is displayed before the video starts playing. Possible values are0and1(default).
Here is the embedded version of a film leader:
YouTube Playlist
The embed code for a player that loads a YouTube playlist looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed?listType=playlist&list=PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq" frameborder="0" allowfullscreen></iframe>
The listType=playlist indicates that the player will load the YouTube playlist whose ID is specified in the list parameter.
Here is the embedded version of Sony Pictures' Official Trailers on YouTube:
Videos Uploaded By a User
The embed code for a player that loads videos uploaded by a user looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed?listType=user_uploads&list=WarnerBrosPictures" frameborder="0" allowfullscreen></iframe>
The listType=user_uploads indicates that the player will load videos uploaded by the user whose ID is specified in the list parameter.
Here is the embedded version of videos uploaded by Warner Bros. Pictures:
Results of a Search Query
The embed code for a player that loads videos using a search query looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed?listType=search&list=movie+trailers+2018" frameborder="0" allowfullscreen></iframe>
The listType=search indicates that the player will load videos matching the search query specified in the list parameter. Note that you should URL-encode any query-string parameters.
Here are some videos that match the term movie trailers 2018:
Custom Playlist
To load your own (database driven or hand edited) playlist in a player you need an embed code similar to this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/T0Jqdjbed40?playlist=SyoA4LXQco4,6l6PPvUhR4c" frameborder="0" allowfullscreen></iframe>
Note that you need to specify a video id – which acts as the first video – and the playlist parameter, which needs to be a comma-separated list of video ids.
Here are some videos I chose to share with you for no reason:
