Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

PLay youtube video on top of an image when its clicked

Posted on 2011-03-10
4
Medium Priority
?
256 Views
Last Modified: 2012-05-11
Hello

I have the following code which is basically a carrousel in javascript made by my designer.
I want that when the user clicks on an image, it plays a youtube video on top of the image.

This carrousel is dinamycally rendered from sharepoint data, so dont worry for that

      <div id="tabs" class="group">
            <ol id="tabs-nav">
          <li><asp:HyperLink ID="Tab1" runat="server" NavigateUrl="#tab1"></asp:HyperLink></li>
          <li><asp:HyperLink ID="Tab2" runat="server" NavigateUrl="#tab2"></asp:HyperLink></li>
          <li><asp:HyperLink ID="Tab3" runat="server" NavigateUrl="#tab3"></asp:HyperLink></li>
          <li><asp:HyperLink ID="Tab4" runat="server" NavigateUrl="#tab4"></asp:HyperLink></li>
          <li><asp:HyperLink ID="Tab5" runat="server" NavigateUrl="#tab5"></asp:HyperLink></li>
          <li><asp:HyperLink ID="Tab6" runat="server" NavigateUrl="#tab6"></asp:HyperLink></li>
        </ol>
        <ol id="tabs-panes">
              <li id="tab1">
                <div class="images">
                <asp:ImageButton ID="ImageButton1" runat="server" width="680" height="300" />
            </div>
            <div class="info">
                  <blockquote>
                    <p><span>&lsquo;&lsquo;</span><asp:Literal ID="BlockQuote1" runat="server"></asp:Literal>&rsquo;&rsquo;</p>
              </blockquote>
              <cite><asp:Label ID="Cite1" runat="server"></asp:Label></cite>
            </div>
            <a href="#" class="video">Ga verder</a>
          </li>
          <li id="tab2">
                <div class="images">
                <asp:ImageButton ID="ImageButton2" runat="server" width="680" height="300" />
            </div>
            <div class="info">
                  <blockquote>
                    <p><span>&lsquo;&lsquo;</span><asp:Literal ID="BlockQuote2" runat="server"></asp:Literal>&rsquo;&rsquo;</p>
              </blockquote>
              <cite><asp:Label ID="Cite2" runat="server"></asp:Label></cite>
            </div>
            <a href="#">Ga verder</a>
          </li>
          <li id="tab3">
                <div class="images">
                <asp:ImageButton ID="ImageButton3" runat="server" width="680" height="300" />
            </div>
            <div class="info">
                  <blockquote>
                    <p><span>&lsquo;&lsquo;</span><asp:Literal ID="BlockQuote3" runat="server"></asp:Literal>&rsquo;&rsquo;</p>
              </blockquote>
              <cite><asp:Label ID="Cite3" runat="server"></asp:Label></cite>
            </div>
            <a href="#" class="video">Ga verder</a>
          </li>
          <li id="tab4">
                <div class="images">
                <asp:ImageButton ID="ImageButton4" runat="server" width="680" height="300" />
            </div>
            <div class="info">
                  <blockquote>
                    <p><span>&lsquo;&lsquo;</span><asp:Literal ID="BlockQuote4" runat="server"></asp:Literal>&rsquo;&rsquo;</p>
              </blockquote>
              <cite><asp:Label ID="Cite4" runat="server"></asp:Label></cite>
            </div>
            <a href="#">Ga verder</a>
          </li>
          <li id="tab5">
                <div class="images">
                <asp:ImageButton ID="ImageButton5" runat="server" width="680" height="300" />
            </div>
            <div class="info">
                  <blockquote>
                    <p><span>&lsquo;&lsquo;</span><asp:Literal ID="BlockQuote5" runat="server"></asp:Literal>&rsquo;&rsquo;</p>
              </blockquote>
              <cite><asp:Label ID="Cite5" runat="server"></asp:Label></cite>
            </div>
            <a href="#">Ga verder</a>
          </li>
          <li id="tab6">
                <div class="images">
                <asp:ImageButton ID="ImageButton6" runat="server" width="680" height="300" />
            </div>
            <div class="info">
                  <blockquote>
                    <p><span>&lsquo;&lsquo;</span><asp:Literal ID="BlockQuote6" runat="server"></asp:Literal>&rsquo;&rsquo;</p>
              </blockquote>
              <cite><asp:Label ID="Cite6" runat="server"></asp:Label></cite>
            </div>
            <a href="#">Ga verder</a>
          </li>

        </ol>
      </div>
0
Comment
Question by:LuisEstebanValencia
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 11

Expert Comment

by:level9wizard
ID: 35095536
Could you just have this open in a lightbox (i.e. Fancybox) ? Check out: http://fancybox.net/
0
 

Author Comment

by:LuisEstebanValencia
ID: 35096816
thats actually a good, idea, how can I implement the fancybox using my code?
0
 
LVL 11

Accepted Solution

by:
level9wizard earned 2000 total points
ID: 35098287
>>[LuisEstebanValencia] thats actually a good, idea, how can I implement the fancybox using my code?

Rather than retype their guide, I suggest simply following http://fancybox.net/howto

If this is your first time working on something like this, you may even want to start experimenting in a blank HTML document (i.e. http://www.webmonkey.com/2010/02/blank_html_document/) so not to confuse potential issues with your existing code. Once you have a working sandbox, you can move what you've learned into your above code.
0
 

Author Comment

by:LuisEstebanValencia
ID: 35109173
I am trying this, but have had no succes, please help me here
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26880338.html
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question