title: how to integrate a jsfiddle into my webpage
body: <p>I'm trying to use the following jfiddle </p>
  
  <p><a href="http://jsfiddle.net/karanmhatre/9tny5eh6/6/" rel="nofollow">http://jsfiddle.net/karanmhatre/9tny5eh6/6/</a></p>
  
  <p>in my website but cant seem to get it to work. I know this topic is discussed extensively and I've spent the entire day trying to figure this out but just can't figure out what I'm doing wrong. I'm a newbie and could really use some help!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Drag and Drop Video&lt;/title&gt;
  &lt;script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'&gt;     &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $(window).load(function(){
  
  $(document).ready(function(){
  
  $(".drag").draggable({
      revert: true,
      containment: "#content"
  });
  $(".drop").droppable(
  { 
        drop: function (event, ui) 
        {
            $(".drag").animate({
                top: "0px",
                left: "0px"
            });
           var url = $(ui.draggable).attr('videourl');
           var oggurl = $(ui.draggable).attr('oggurl');
           var $videocontainer = $('#video-container');
  
           $videocontainer.empty().append('&lt;video id="video" controls width="400" height="300"&gt;&lt;source src="'+url+'" type="video/mp4" /&gt;&lt;source src="'+oggurl+'" type="video/ogg" /&gt;&lt;/video&gt;');
           $('#video').get(0).play();
        }
  });
  });
  }); // Closes window.load
  
  &lt;/script&gt;
  
  &lt;link rel="stylesheet" href="styles/layout.css" media="screen"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="thumbs"&gt;
      &lt;img class="drag one-half" videourl="http://www.w3schools.com/html/mov_bbb.mp4" oggurl="profile-amanda.ogv" id="image" src="http://www.bigbuckbunny.org/wp-content/themes/bunny/graphics/header1.jpg" /&gt;
  
      &lt;img class="drag one-half last" videourl="http://www.w3schools.com/html/mov_bbb.mp4" oggurl="profile-amanda.ogv" id="image" src="http://www.bigbuckbunny.org/wp-content/themes/bunny/graphics/header2.jpg" /&gt;
  &lt;/div&gt;
  
  &lt;br style="clear:both;" /&gt;
  
  &lt;div id="video-container" class="drop"&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>