Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <ul id="features">
    <li><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/jfiNQGFVjb4?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/jfiNQGFVjb4?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
    <li><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/qtzjzMsJiO8?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qtzjzMsJiO8?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
    <li><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/baa-dGj2LhQ?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/baa-dGj2LhQ?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></li>
  </ul>
  
  <ul id="thumblinks">
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
  </ul>
  
</body>
</html>
 
/*global window: false */
var addImages = function () {
  
  // Part 1
  var features = document.getElementById('features'),
  embeds = features.getElementsByTagName('embed'),
  ids = [], i, thumbNav, items, mysrc, pattern, ytid, newImg;
  
  for (i = 0; i < embeds.length; i += 1) {
    mysrc = embeds[i].getAttribute('src');
    pattern = /^(http:\/\/www.youtube.com\/v\/)([a-zA-Z0-9]*)(\?[^\?]*)$/;
    ytid = mysrc.replace(pattern, '$2');
 
    alert("src number " + i + " is " + ytid);
    ids.push(ytid);
  }
  
  // Part 2 (StackOverflow, don't worry about this part)
  
  thumbNav = document.getElementById('thumblinks');
    items = thumbNav.childNodes;
​
  for (i = 0; i < items.length; i += 1) {
    newImg = document.createElement('img');
    //newImg.src = "http://img.youtube.com/vi/" + ids[i] + "/1.jpg";
    newImg.src = "http://www.wallpaperbase.com/wallpapers/movie/batman/batman_6.jpg";
    //thumbNav.appendChild(newImg);
  }
};
​
window.onload = addImages;
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers