Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 261
  • Last Modified:

PLay youtube video on top of an image when its clicked

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
LuisEstebanValencia
Asked:
LuisEstebanValencia
  • 2
  • 2
1 Solution
 
level9wizardCommented:
Could you just have this open in a lightbox (i.e. Fancybox) ? Check out: http://fancybox.net/
0
 
LuisEstebanValenciaAuthor Commented:
thats actually a good, idea, how can I implement the fancybox using my code?
0
 
level9wizardCommented:
>>[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
 
LuisEstebanValenciaAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now