Youtube Embed Generator

Easily embed your Youtube videos on your website

Use our generator to easily embed YouTube videos on your site for your channel, search query, or playlist. This will create the video player and video list on your website and is fully customizable.

Want to get started? Use our Youtube video embed generator below with a real time preview.

Generator

This generator will help you create the HTML needed to get your video embeds working. You can copy & paste this into your website, optimize your layout (css) and you're done.

Action: Search Playlist User Channel Query: Results: 1 2 3 4 5 10 20 50 Views & duration: Display No (faster)
Player: embed into site link to youtube Results: thumbnails full format

---

Examples

The installation is very simple, provides super fast results, and has a wide set of features. Lets continue with some examples:

All YouTube videos about: "music video"

<script src="https://yvoschaap.com/ytpage/ytembed.js"></script> <div id="youtubeDiv"></div> <script>ytEmbed.init({'block':'youtubeDiv','type':'search','q':'music video','results': 3});</script>

---

A YouTube playlist: Music Videos by VEVO

<script src="https://yvoschaap.com/ytpage/ytembed.js"></script> <div id="youtubeDivPlaylist"></div> <script>ytEmbed.init({'block':'youtubeDivPlaylist','type':'playlist','q':'LL2pmfLm7iq6Ov1UwYrWYkZA','results': 3, 'meta':true});</script>

---

YouTube User videos: yvo

<script src="https://yvoschaap.com/ytpage/ytembed.js"></script> <div id="youtubeDivUser"></div> <script>ytEmbed.init({'block':'youtubeDivUser','type':'user','q':'yvo','results': 6,'layout':'thumbnails','player':'embed','height':360,'width':640,'display_first':true});</script>

---

A simple inline YouTube video search

<script src="https://yvoschaap.com/ytpage/ytembed.js"></script> <form onsubmit="ytEmbed.init({'block':'youtubeDivSearch','type':'search','q':document.getElementById('ytSearchField').value,'results': 5,'meta':true}); return false;"> <input type="text" id="ytSearchField"> <input type="submit" value=" Search "> </form> <div id="youtubeDivSearch"></div>

---

Installation

To install the YouTube video thumbnail results you can use the generator or follow the instruction below.

First: download this javascript file (4kb), and upload it to your server. On the page that you want the YouTube video thumbnail results to appear include this line in your document:

<script src='/ytembed.js'></script>

Up next is finding a nice spot where you want to have the YouTube video thumbnails. Insert there this html code that creates a block with the ID youtubeDiv (must be unique).

<div id="youtubeDiv"></div>

Directly below the code provide the configuration of the YouTube video thumbnails you want to show. An example:

<script>ytEmbed.init({'block':'youtubeDiv','type':'search','q':'baby laughing','results':'4','meta':'true'});</script>

The detailed explanation is below, but this code will do a YouTube video search on the newest videos uploaded on "baby laughing" and have 4 thumbnails returned that link to the YouTube video player.

And now comes the part to configure the script to your liking. You must tell the script what kind of videos you want to display on your page, this is done by providing several settings. You can do this by hand as explained below, or with our generator. The settings that are available:

• key - obligated YouTube developer API key.
• block - obligated ID of the html element (<div id='this_is_the_block_id'>) where you want the results thumbnails to appear.
• type - obligated setting that provides the function you want to execute:
  • search - YouTube searches for a video with the string set by 'q'.
  • playlist - results of a YouTube playlist set by playlist id in 'q'.
  • user - results of a YouTube user videos set by user name in 'q'.
• q - obligated string to identify your results, see 'type' above.
• results - the number of results you want to show.
• meta - set to true to display duration and views.
• player - decide if you want to play the video on youtube.com or embed on your page:
  • embed - plays the video on your page.
  • link - plays the video on youtube.com
• display_first - display the player and queu first video results (needs player set to embed)
  • true
• width: embed player width
• height: embed player height
• layout - how do you want the results to appear:
  • thumbnails - only a list of thumbnails as result.
  • full - list of results with thumbnail, description, rating and user

You use these settings by placing them in this template style 'what':'value'. Separated by a comma. This is then placed within this function ytEmbed.init({'what':'value','what2':'value2'}); surrounded by <script> tags, again an example below:

<script>
ytEmbed.init({'block':'youtubeDiv','type':'search','q':'baby laughing'});
</script>

This piece of script is added below your <div id="youtubeDiv></div>.

Search Youtube with instant playlist builder.

This embed generator and video script is developed by Yvo Schaap