Scripts

Youtube jQuery plugin

Door Maarten PHP -04-03-2011 20:07 -7.997 views

De waarde van de toevoeging van deze plugin is te summier. Er kan beter gebruik worden gemaakt van: http://code.google.com/intl/nl-NL/apis/youtube/iframe_api_reference.html. Dit is mijn eerste jQuery plugin je kan het zo gebruiken: Ik heb gelezen dat een iframe voor youtube filmpjes het nieuwste is en dat flash gedoe wil ik ook niet van dat je een audio en/of video-mimetype moet instellen Hier een demo: http://phphulp.t35.com/jquery/plugins/1/index.html

Download alle bestanden als ZIP

index.html

[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Webdesigner 31 Jquerytechnieken</title>
   <script src="javascript/jquery.js"></script>
   <script src="javascript/plugin.js"></script>
</head>
<body>

<div id="player"></div>

<script type="text/javascript">
$(document).ready(function() {
   $("#player").youtube("aMBxZMxz2S8", 480, 290);
});
</script>

</body>
</html>
[/code]

plugin.js

[code]
(function($) {
    $.fn.youtube = function(youtubeID, width, height) {
        var defaults = {
            youtubeID: youtubeID,
            width: width,
            height: height
        };
          var options = $.extend(defaults, options);
            return this.each(function() {

                obj = $(this);
                obj.show();

                var youtubeID = defaults['youtubeID'];
                var width = defaults['width'];
                var height = defaults['height'];
                
                obj.html("<a href='http://www.youtube.com/watch?v=" + youtubeID + "'><img src='http://img.youtube.com/vi/" + youtubeID + "/0.jpg' width='" + width + "' height='" + height + "' border='0' style='margin:0; padding:0; width:" + width + "px; height:" + height + "px; border:0px;'></a>");
                obj.html("<iframe frameborder='0' marginheight='0' marginwidth='0' width='" + width + "' height='" + height + "' src='http://www.youtube.com/v/" + youtubeID + "' style='margin:0; padding:0; width:" + width + "px; height:" + height + "px; border:0px;'><a href='http://www.youtube.com/watch?v=" + youtubeID + "'><img src='http://img.youtube.com/vi/" + youtubeID + "/0.jpg' width='" + width + "' height='" + height + "' border='0' style='margin:0; padding:0; width:" + width + "px; height:" + height + "px; border:0px;'></a></iframe>");
                obj.show();
                
              });
     };
})(jQuery);
[/code]