YouTube Video Gallery HTML Code

By Ramiro Rodriguez   Posted at  12:50:00 AM   youtube

The HTML code below will install a YouTube video gallery on any webpage.  To use the video gallery, copy, then paste the code into a blank web page.  All the HTML code is included so you don't have to do anything except gather the videos' IDs you want to display on your webpage.  The video IDs are near the end of the script.  They look like this:

 

  • 'fzrfrXhE-w4'
  • 'ROipDjNYK4k'
  • '8ZRLlyxvr6E'
  • 'wEKLEeY_WeQ'
  • 'O_yVo3YOfqQ'
  • 'piH5_aP0fY8'

 

Technorati Tags:
The code includes videos (samples) as well as some of the other things you'll need to create a video gallery.  I copied the code from http://dynamicdrive.com/dynamicindex17/youtube-video-gallery.htm.  It's a great site if you're looking for scripts or if you want to learn how to perform a certain task for  your website.  All the scripts I've used are free so I'm not sure if they offer paid scripts.

 

At any rate, use the script below.  Have fun with it!

 

=========

<!doctype html>
<html>
<head>

<meta charset="utf-8">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>RicoRamiro's YouTube Video Gallery</title>
        <meta name="robots" content="index, follow">

        <meta name="description" content="YouTube video gallery." />
    <meta name="author" content="Ramiro Rodriguez">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<link rel="stylesheet" href="http://dynamicdrive.com/dynamicindex17/ddvideogallery.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="http://dynamicdrive.com/dynamicindex17/ddvideogallery.js">

/***********************************************
* Youtube Video Gallery script - (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

</head>

<body>

    <p>This is RicoRamiro's YouTube Video Gallery.  I hope you enjoy it and that you spend at least 20 to 30 minutes on this website.  That's important!</p>

<div id="videojukebox" class="ddvideoGallery">
    <div class="videoWrapper"></div>
    <div class="videoNav"></div>
</div>


<script>
<!--
// initialize video gallery after markup above

var myvideogallery = new ddyoutubeGallery({
    sliderid: 'videojukebox',
    selected: 0, // default selected video within playlist (0=1st, 1=2nd etc)
    autoplay: 1, // 0 to disable auto play, 1 to enable
    autocycle: 1, // 0 to disable auto cycle, 1 to auto cycle and play each video automatically
    playlist: [ // list of youtube video IDs. It's the last segment within a shareable Youtube URL
        'SbQc_JLUH7k',
        'fzrfrXhE-w4',
        'ROipDjNYK4k',
        '8ZRLlyxvr6E',
        'wEKLEeY_WeQ',
        'O_yVo3YOfqQ',
        'piH5_aP0fY8'

    ]
})
//->
</script>

</body>
</html>

=========

About the Author

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.
View all posts by: BT9

Back to top ↑
Connect with Us

What they says

© 2013 No Form to Fill Out. WP Mythemeshop Converted by Bloggertheme9 Published..Blogger Templates
Blogger templates. Proudly Powered by Blogger.