video-slider

Video Slider

An extension of the Amazing Slider, the Video Slider allows you to display your video clips right in the header of the page, in slider format.

Tips


Instructions

YouTube Video Slider

  1. you can add more video’s than the default, or reduce the total number to suit your needs

Video Demonstration ( skip the reading, just watch and learn! )

Load your Youtube video

  1. Expand the Library >> sliders >> video-slider folder.
  2. Double click on the video-slider.htm page to open.
  3. Switch the page to ‘Code’ view.
  4. Locate your video on the YouTube website.
  5. Click the ‘Share’ button located below the video window.
  6. Then click the ‘Embed’ link
  7. And you’ll see the link, change to a <iframe…
  8. Change the video size to 640×360 in the Video size: options
  9. Double click on the video ID located in the ULR of the <iframe code.. ( this will select the ID code only )
  10. Right click and Copy, or ( Ctrl+C ) to copy the ID.
  11. Switch back to the ‘video-slider’ Library page.
  12. Double click on the ID of the default video to select it.
  13. Paste your video ID code in place

Change the captions

  1. Expand the Library >> sliders >> video-slider folder.
  2. Double click on the video-slider.htm page to open.
  3. Switch the page to ‘Code’ view.
  4. You’ll see your video’s listed in the <ul class=”amazingslider-slides”> group, and the thumbnails listed below that in the <ul class=”amazingslider-thumbnails”> group.
  5. Each video includes an ( alt ) tag, with the title text wrapped in double quotes.
  6. Change the alt text, to change the caption in the thumbnail.
  7. Make sure to keep your text wrapped in the “… ” double quotes.
  8. If you don’t want a title, just leave the alt field blank as in this example ( leave the double quotes, just remove the text ).

Replace the main loading pic

You’ll probably want to create your own preload image, maybe something with some text and a description or what the video is about. You can do this online at

http://cooltext.com/

  1. Here’s an example of what you can create with cooltext.com
  2. Create an image by creating a logo. The logo can use many text effects and be quite attractive, use different backgrounds and fonts… the logo example took less than a minute to create and download.
  3. Create your logo size ( 640×360 ). Save to your computer, and import into your ( Library >> sliders >> video-slider >> images (folder).
  4. Create a second copy, this copy will be used for the thumbnail image. Create a second logo with the size of 240x135px.
  5. You’ll save both of these images into the Library >>sliders >> video-slider >> images (folder).
  6. OR…
  7. You can cheat a bit on this one, as YouTube creates a loading pic, and thumbnail for you when you upload a video.
  8. The Quality of the image may not be that great, thus the suggestion of creating your own preloading image first, and you’ll need to resize the preloading image to fit the video window.
  9. You can find the YouTube pics by using the following undocumented method, or some type of URI loader, which gets complicated.
  10. copy the following link into your web browsers address barhttp://img.youtube.com/vi/videoID/0.jpg
  11. replace the “videoID” with your actual youtube video ID which can be found in the video embed link
  12. Use this example, we would pull up the following image in our web browser.
  13. http://img.youtube.com/vi/vtMENJ1zyGk/0.jpg
  14. Right click on the image, select the Save image as … command
  15. Save the image to your computer.
  16. By default, the image size is 480×360, you’ll need to increase this to 640×360 so it displays correctly in the video preview window. If you use the default size the video window will try to compensate and the frame will go a bit out of alignment.
  17. You can upload the image to ( http://www.online-image-editor.com/ ) and resize it directly online.
  18. Next, you just need to import your preloading images, and replace the defaults…
  19. Now to replace an image, just locate the image on the page that you want changed.
  20. Double click on the image to open the Picture Properties window.
  21. Click the browse button.
  22. Browse to the ‘images’ folder, or the folder where you imported your images.
  23. Select your replacement image.
  24. Click the Open button.
  25. Then click OK.
  26. You’ll notice your new image now on the page.
  27. Double Click on the new image to open the Picture Properties window once again,
  28. then click the ( Appearance ) tab.
  29. Unselect the ( Specify size ) checkbox.
  30. Click OK to save.
  31. This is a pretty important last step if you’re concerned about mobile devices. Be default your web editor will ( add ) the image width and height properties. You don’t want that. The slider is repsonsive, meaning it will scale the images depending on the browser resolutions ( up to a maximum size that is, so the image isn’t larger than is actual size ). Mobile devices scale the image, allowing the image to be viewed on a mobile phone for example. If you allowed your web editor to include a fixed pixel width and height, your page wouldn’t resize correctly on mobile devices.
  32. You’ll also need to update the thumbnail image. Fortunately, the thumbnail pulls for the same image as the large image, so you only need to update the ‘link’ for the thumbnail.
  33. You can do this easily in the ‘Code’ view, is you just copy the name of your main image.
  34. Then paste it over the name of the thumbnail image.
  35. Continue with the rest of the images you want to replace.

Adding images

  1. You’ll need to run through the 2 previous sections ( Replacing images ) as they play a major role when it comes to adding images.
  2. To add an image you just need to import your new images into the ( Library >> sliders >> video-slider >> images ) folder,
  3. once imported, open the ‘video-slider.htm’ page and switch over to Code view.
  4. You’ll need to copy an the link / code for an existing image, and paste that link / code for each additional image you’ll be adding.
  5. You’ll also need to do this for both the <!– main images –> and <!– thumbnail images –>
  6. To make things easier to follow, lets just add our new images so they load after the first 4, let’s add for more images
  7. Start by copying the link for the 4th image.
  8. ( it’s easiest to just click on the line number to the left, to select the entire line of code )
  9. With that line of code selected, press ( Ctrl+C ) on your keyboard to copy, or right click on the selected line, and click Copy.
  10. Now you’ll just need to paste ( Ctrl+V ) once for each new image.
  11. Now do the same for the Thumbnails below.
  12. Now that you’ve added your images, just switch back to the Design view window, scroll down the page until you find the first duplicate of your copied image.
  13. Double click on the image to open the Picture Properties window, and browse to the folder where your new images are located.
  14. Select your image, and press the Open button,
  15. then OK,
  16. ( hint: go through the tutorials listed above “Replacing images” for full details )
  17. continue this with your remaining images and thumbnails.

Change the image size

**NOTE** for this update, make sure ALL your images are the same size.

  1. Expand the Library >> sliders >> js (folder).
  2. Open the ‘initslider-1.js’ file.
  3. Change the width and height properties located on lines 11 and 12 ( or there abouts ).
  4. ( just use a number, no px or quotes required )

Link your images to pages

  1. Open your video-slider.htm page.
  2. Locate the image for which you’d like to change the link.
  3. Double click on the image to open the Picture Properties.
  4. Click the (Browse) button next to the existing hyperlinked page.
  5. Browse through your list of pages and select a new page or manually type the link into the Address: field
  6. Click OK, then OK.

Change the slide duration

  1. Expand the Library >> sliders >> js (folder).
  2. Open the ‘initslider-1.js’ file.
  3. Locate the ‘slideinterval’ setting ( about line 26 ).
  4. Change the default 5000 to a new interval in milliseconds, example:
  5. ( 5000 = 5 seconds / 10000 = 10 seconds )
  6. Save and close.

Change the animation type

  1. Expand the Library >> sliders >> video-slider >> js (folder).
  2. Open the ‘initslider-1.js’ file.
  3. Locate the ‘transition’ settings at the very bottom of the page.
  4. You’ll see a listing of transitions:
  5. When listing more than 1 transition effect, they will be randomized.
  6. You can remove the transition effects you don’t want to use, or remove all but the one you do want to use.
  7. Save, test in browser, then close when happy!

Adding videos

  1. Expand the Library >> sliders >> video-slider folder.
  2. Double click on the video-slider.htm page to open.
  3. Switch to Code view.
  4. Copy an existing block of video marked by the comment tags.
  5. Paste where you want your new video to appear in the order.
  6. Update the comment tags, to help keep yourself organized.
  7. Then proceed to update the video ID, loading pic, alt title.
  8. Scroll down the page, copy an existing thumbnail link.
  9. Paste in the same order as your video above.
  10. Change the comment tag to keep organized.
  11. Change the link to the thumbnail image.

YouTube Video Slider

In this tutorial, we’ll demonstrate how to:

  • load your youtube video
  • change the captions
  • change the loading pic
  • change the thumb pic
  • add video
  • remove video
  • change the video size
  • change the slide duration
  • change the animation type
  1. you can add more video’s than the default, or reduce the total number to
    suit your needs

Video Demonstration ( skip the reading, just watch and learn! )

Link to video

Load your Youtube video

  1. Expand the Library >> sliders >> video-slider folder.
  2. Double click on the ‘video-slider.lbi’ page to open.
  3. Switch the page to ‘Code’ view.
  4. Locate your video on the YouTube website.
  5. Click the ‘Share’ button located below the video window.
  6. Then click the ‘Embed’ link
  7. And you’ll see the link, change to a <iframe…
  8. Change the video size to 640×360 in the Video size: options
  9. Double click on the video ID located in the ULR of the <iframe code.. ( this will select the ID code only )
  10. Right click and Copy, or ( Ctrl+C ) to copy the ID.
  11. Switch back to the ‘video-slider’ Library page.
  12. Double click on the ID of the default video to select it.
  13. Paste your video ID code in place

Change the captions

  1. Expand the Library >> sliders >> video-slider folder.
  2. Double click on the ‘ideo-slider.lbi’ page to open.
  3. Switch the page to ‘Code’ view.
  4. You’ll see your video’s listed in the <ul class=”amazingslider-slides”> group at the top of the page:
  5. And the thumbnails listed at the bottom of the page in the <ul class=”amazingslider-thumbnails”> group.
  6. Each video includes an ( alt ) tag, with the title text wrapped in double quotes.
  7. Change the alt text, to change the caption select the ‘alt’ text between the double qoutes:
  8. And type your new title / caption.
  9. Make sure to keep your text is still wrapped in the “… ” double quotes.
  10. If you don’t want a title, just leave the alt field blank as in this example ( leave the double quotes, just remove the text ).

Replace the main loading pic

You’ll probably want to create your own preload image, maybe something with some text and a description or what the video is about. You can do this online at

http://cooltext.com/

  1. Here’s an example of what you can create with cooltext.com
  2. On the www.cooltext.com website you can create an image by creating a logo. The logo can use many text effects and be quite attractive, you can also apply many different backgrounds and fonts… the logo example above took less than a minute to create and download.
  3. Create your logo size ( 640×360 ). Save to your computer, and import into your ( Library >> sliders >> video-slider >> images (folder).
  4. Create a second copy, this copy will be used for the thumbnail image. Create a second logo with the size of 240x135px.
  5. You’ll save both of these images into the Library >>sliders >> video-slider >> images (folder).
  6. OR…
  7. You can cheat a bit on this one, as YouTube creates a loading pic, and thumbnail for you when you upload a video.
  8. The Quality of the image may not be that great, thus the suggestion of creating your own preloading image first, and you’ll need to resize the preloading image to fit the video window.
  9. You can find the YouTube pics by using the following undocumented method, or some type of URI loader, which gets complicated.
  10. copy the following link into your web browsers address barhttp://img.youtube.com/vi/videoID/0.jpg
  11. replace the “videoID” with your actual youtube video ID which can be found in the video embed link
  12. Use this example, we would pull up the following image in our web browser.
  13. http://img.youtube.com/vi/rUT5pFempLI/0.jpg
  14. Right click on the image, select the Save image as … command
  15. Save the image to your computer.
  16. By default, the image size is 480×360, you’ll need to increase this to 640×360 so it displays correctly in the video preview window. If you use the default size the video window will try to compensate and the frame will go a bit out of alignment.
  17. You can upload the image to ( http://www.online-image-editor.com/ ) and resize it directly online.
  18. Next, you just need to import your preloading images, and replace the defaults…

Replace the preloader image in the page:

  1. Switch your page to Design View.
  2. Double click the preloader image you want to update, this will open the ‘Select Image Source’ window.
  3. Select your replacement image.
  4. Click the OK button to add to your page.
  5. You’ll notice your new image now on the page.
  6. You’ll also need to update the thumbnail image. Fortunately, the thumbnail pulls for the same image as the large image, so you only need to update the ‘link’ for the thumbnail.
  7. You can do this easily in the ‘Code’ view, is you just copy the name of your main image.
  8. Then paste it over the name of the thumbnail image.
  9. Continue with the rest of the images you want to replace.

Adding Video’s

  1. You’ll need to run through the 2 previous sections ( Replacing images ) as they play a major role when it comes to adding video’s.
  2. To add an video you just need to import your preloader images into the ( Library >> sliders >> video-slider >> images ) folder,
  3. once imported, open the ‘video-slider.lbi’ page and switch over to Code view.
  4. You’ll need to copy an the code for an existing video, and paste that code for each additional video you’ll be adding.
  5. You’ll also need to do this for both the <!– video #  –> and <!– thumb #  –>
  6. To make things easier to follow, lets just add our new video’s so they load after the first 8.
  7. Start by copying the link for the last video section image.
  8. ( it’s easiest to just click on the line number to the left, to select the entire line of code )
  9. With that line of code selected, press ( Ctrl+C ) on your keyboard to coor right click on the selected line, and click Copy.
  10. Now you’ll just need to paste ( Ctrl+V ) once for each new video.
  11. Now do the same for the Thumbnails below
  12. Click the page where you want to paste the code.
  13. Press ( Ctrl+V ) or Edit >> Paste to paste.
  14. Just update the link to the thumbnail image.