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: 2 years 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>