Today, I googling and found how to make YouTube video thumbs. In this post, I’ll show you, how to create YouTube video thumbs on your web page. All you need is the javascript file JS and set your CSS and the function below to grab the videos you want.
1 2 3 | <script> insertVideos('youtubeDiv','search','$searchterm','$resultsnumber','$useoverlay'); </script> |
This example page loads youtube video thumbs inside your page with the use of only one javascript file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Plug-and-Play Youtube - Easy Video Include</title>
<style>
#youtubelist{
margin: 0;
padding: 5px;
list-style: none;
clear: both;
display: block;
}
#youtubebox{
clear: right;
display: inline;
padding: 0;
margin: 2px;
}
#youtubethumb {
margin-bottom: 5px;
width: 90px;
height: 80px;
border: 4px solid #333;
}
#youtubecontent {
height: 520px;
width: 430px;
margin-left: -430px;
top: -220px;
position: absolute;
left: 50%;
}
#youtubeoverlay {
background-color: #fff;
overflow: visible;
position: absolute;
height: 1px;
width: 100%;
top: 50%;
}
</style>
<script src="youtube.js" type="text/javascript"></script>
</head>
<body>
<p>This example page loads youtube video thumbs inside your page with the use of only one javascript file.</p>
<h2>Video search: music video</h2>
<div id="youtubeDiv" style="display: block; clear: both">
</div>
<script>
insertVideos('youtubeDiv','search','music video','20',0);
</script>
</body>
</html> |
This the result on web browser.
Resources : http://www.yvoschaap.com/youtube/
