jQuery YouTube Player Plugin: Embed YouTube video player and images in a page

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2025-07-09 (-3 hours ago) RSS 2.0 feedNot enough user ratingsTotal: 119 All time: 388 This week: 4Up
Version License JavaScript version Categories
jquery-youtube 1.0BSD License5HTML, jQuery, Video
Description 

Author

Emil Kilhage

This is a jQuery plugin that can embed YouTube video player and images in a page.

It can load the image or the video player of a given YouTube video inside the current HTML element.

The YouTube player parameters can be configured like auto-hide, auto-play, HD playback, show information, etc..

Innovation Award
JavaScript Programming Innovation award nominee
December 2016
Number 3		 YouTube is the most popular Internet video platform. Many people use it to host videos to be embedded in Web site pages.

This jQuery plug-in makes it easy to dynamically embed YouTube videos as well their screenshot images with control of several playback parameters.

Manuel Lemos
Picture of Emil Kilhage
  Performance   Level  
Name: Emil Kilhage <contact>
Classes: 5 packages by
Country: Sweden Sweden
Age: ???
All time rank: 1112 in Sweden Sweden
Week rank: 6 Up1 in Sweden Sweden Up

Level 1 Star

 Innovation award
Innovation award
Nominee: 4x

Winner: 2x

Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>
      jQuery Youtube Plugin
    </title>

    <script language="Javascript" type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <link type="text/css" rel="stylesheet" href="http://syntaxhighlighter.googlecode.com/svn-history/r86/trunk/Styles/SyntaxHighlighter.css"></link>
    <script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/r86/trunk/Scripts/shCore.js"></script>
    <script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn-history/r86/trunk/Scripts/shBrushJScript.js"></script>
    <script language="Javascript" type="text/javascript" src="jquery-youtube.js"></script>
    <style type="text/css">
      .main {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 30px;
        padding-top: 20px;
      }

      .div {
        width: 650px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 20px;
        margin-bottom: 30px;
        padding: 20px;
        height: auto;
      }

      h3 {
        margin: 0px;
        padding: 0px;
      }

      h1 {
        margin: 0px;
        padding: 0px;
        margin-bottom: 20px;
      }

    </style>
  </head>
  <body>

    <div class="main">
      
      <center>
        <h1>
          jQuery Youtube Plugin
        </h1>
      </center>

      <div class="div">
        
        <h3>
          Code:
        </h3>
<pre name="code" class="jscript">
//Javascript:
$('.youtube_1').youtube('image').click(function(){
  $(this).youtube('video', {
    autohide: true,
    autoplay: true,
    showinfo: true
  });
});

/*
 * Html:
 * &#60;a id="youtube_1" href="DX1iplQQJTo" alt='{"width":"400","height":"300"}'&#62;&#60;/a&#62;
 */
 
</pre>
        <br><br>
        
        <center>
          <a class="youtube_1" data-id="DX1iplQQJTo" alt='{"width":"400","height":"300"}'></a>
        </center>
        
        <script>
          $('.youtube_1').youtube('image').click(function(){
            $(this).youtube('video', {
              autohide: true,
              autoplay: true,
              showinfo: true
            });
          });
        </script>
        
      </div>
      
      <div class="div">
        <h3>
          Code:
        </h3>
        <pre name="code" class="jscript">
//Javascript:
$('#youtube_2').youtube('video');

/*
 * Html:
 * &#60;a id="youtube_2" href="KV2ssT8lzj8" alt='{"width":"600","height":"500"}'&#62;&#60;/a&#62;
 */
 
        </pre>

        <br><br>
        
        <center>
          <a id="youtube_2" data-id="DX1iplQQJTo" alt='{"width":"600","height":"500"}'></a>
        </center>

        <script>
          $('#youtube_2').youtube();
        </script>

      </div>

      <div class="div">
        <h3>
          Code:
        </h3>
        <pre name="code" class="jscript">
//Javascript:
$('#input').blur(function(){
  var html = $.youtube.element('#element', $('#input').val());

  $('#container').html(html);

  $('#element').youtube('video', {
    autoplay: true,
    width:    '300',
    height:   '250'
  });
});

/*
 * Html:
 * &#60;input type="text" id="input"&#62;
 *
 * &#60;center id="container"&#62;&#60;/center&#62;
 */
        </pre>
        Try insert a youtube-id here: <input type="text" id="input2">
        <br>
        <br>
        
        <center id="container2"><a></a></center>

        <script>
          var a = $('#container2 a');
          $('#input2').blur(function(){
            a.youtube('video', {
              autoplay: true,
              width:    '300',
              height:   '250',
              id: $('#input2').val()
            });
          });
        </script>

      </div>

    </div>
    <script>
      dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn-history/r86/trunk/Scripts/clipboard.swf';
      dp.SyntaxHighlighter.HighlightAll('code');
    </script>
  </body>
  
</html>

Details

/ * jQuery Youtube plugin * Class for loading Youtube videos and images * * https://github.com/kilhage/jquery-youtube * @creator Emil Kilhage, 2010 * @version: 1.0 * @date: 2010-11-14 04:33:30 * MIT Licensed. * Usage examples: *--------------------------------------------------------------- * Html: * @param href: youtube id * @param alt: json encoded string with the width and height * <a class="youtube" href="47piCmAB0s4" alt="{'width':'300','height':'240'}"></a> * * Javascript: * @param type: The type of element you want to get * $.fn.youtube(type); * * To load the image: * $('.youtube').youtube('image'); * * To load the video: * $('.youtube').youtube('video', config); *--------------------------------------------------------------- * The global object: * * $.youtube.config(); * Will return the current config * * $.youtube.config({ * autohide: true * }); * Will replace the default value of the autohide parameter * * $.youtube.config({ * autohide: true * }, true); * Will replace the current config with the config object that you pass *

www.glooby.com www.glooby.se


  Files folder image Files (8)  
File Role Description
Files folder imagetest (5 files)
Accessible without login Plain text file example.html Example Example
Plain text file jquery-youtube.js Class Class source
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files (8)  /  test  
File Role Description
  Accessible without login Plain text file bench.js Aux. Auxiliary script
  Accessible without login Plain text file bench.php Data Auxiliary data
  Accessible without login Plain text file min.html Data Auxiliary data
  Plain text file test.js Class Class source
  Accessible without login Plain text file test.php Data Auxiliary data

Downloadjquery-youtube-2025-07-09.zip
Downloadjquery-youtube-2025-07-09.tar.gz
 Version Control Unique User Downloads Download Rankings  
 100%
Total:119
This week:0
All time:388
This week:4Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.