SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Video navigatio bar

    Hi masters, here is my trouble.

    I can insert YouTube videos in my pages, using the embeded code provided by Youtube.

    I have many codes of videos and I want implement a navigation bar below the main video, I'll try to explain it with the follow image.



    Someone know some script to do that navigation bar?

    From now, thank you for any help.

    Sicerely
    Elalux

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The easiest method of approach i can see for this problem is as follows:

    For the functionality of the navigation (client side) it would be easiest if you used a jquery carousel plugin to implement your bottom navigation set.

    For the changing of the videos there are several options, but here are 2 of the most likely one's you could implement:

    - For each navigation item link to a new page for each video (have a seperate .html, .aspx, .php page etc for each video)

    - If you want to just use one page and make it dynamically the video load in the page, i'd recommend using a Query string for each video link (linking to the same page), then have the back-end fetch this value and replace the id (see values in red) within your youtube embed tag...e.g:

    Code:
    <object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/jpkGvk1rQBI&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_US&feature=player_detailpage&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/jpkGvk1rQBI&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_US&feature=player_detailpage&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="385"></embed></object>
    Good luck


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •