File: example.html

Recommend this page to a friend!
  Classes of Emil Kilhage  >  jQuery YouTube Player Plugin  >  example.html  >  Download  
File: example.html
Role: Example script
Content type: text/plain
Description: Example
Class: jQuery YouTube Player Plugin
Embed YouTube video player and images in a page
Author: By
Last change: Update of example.html
Date: 1 month ago
Size: 4,094 bytes
 

Contents

Class file image Download
<!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>