0

I am cluless about this since I am a begginer, I have created this template for wordpress, my customer wanted to show a youtube video when you click on the respective play button on each image:

http://oxfordandregentstreet.com/

Now this is the code I made for it:

On the header I put this function

   enter code here

  
  On the header I put this function

  <script  type="text/javascript">
  jQuery(document).ready(function(){

  jQuery(".play1").click(function(){
   jQuery(".vid1").show();
  });


  jQuery(".closevid, this").click(function(){
   jQuery(".vid1").hide();
  });
 
	});
  </script>
enter code here

 
 CSS code on the css file
.vid1{
position: absolute;
bottom: -1.5em;
left: .3em;
}



.videos{
 position: relative;
 display: none;

}


.play1{
position: relative;
bottom: 9em;
left: 8em;
}


enter code here
HTML code on the page:

<script     
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>
<table border="0" align="center">
  <tbody><tr>
    <td><img src="/wp-content/uploads/2015/02/Constant-Contact-  290x190.png" alt=""><a href="#" ><img src="/wp-content/themes/Oxford/images/Play-1-Normal-Red-icon.png" alt=""  width="" class="play1"></td>
  
  </tr>
  </tbody></table></div>

   <div class="videos">
   <div class="vid1"><a href="#" class="closevid">Close X</a><iframe   width="960" height="705" src="https://www.youtube.com/embed/1wVD0I2zQBw"  frameborder="0" allowfullscreen></iframe></div>
    </div>

I test this code on the first play button but nothing happens, chrome's console doesn't show any errors, and I am using "Use Google Libraries" to include the code.

Can you please help me with this guys, I have researched the internet for days and I haven't found any solution.

Thanks in advance :)

2
  • The <script> tag showed on the html part is on the head section.
    – MoonLady
    Feb 26, 2015 at 1:58
  • make sure no other (html) element, overlaps (and thus "hides" ) the buttons so the buttons actually recieve the click events
    – Nikos M.
    Feb 26, 2015 at 2:04

3 Answers 3

2

There's a few issues I can see:

CSS

Remove display: none; from .videos since you're always hiding everything inside that container. Instead, change your existing CSS to include it:

.vid1, .vid2, .vid3, .vid4, .vid5, .vid6 {
    position: absolute;
    bottom: -1.5em;
    left: .3em;
    display: none; /* added here */
}

Code

The play button class is play1 so, your code to show vid1 should be:

jQuery(".play1").click(function (e) {
  e.preventDefault(); 
  jQuery(".vid1").show();
});

The close button is already inside vid1 so just hide the container when closevid inside vid1 is clicked:

jQuery(".vid1 .closevid").click(function (e) {
  e.preventDefault();
  jQuery(".vid1").hide();
});
0
0

Make sure you are calling jquery before running your script. You also need to prevent default when adding click events to anchor tags

<script  type="text/javascript">
    jQuery(document).ready(function(){

        jQuery(".play1").click(function(e){
            e.preventDefault();
            jQuery(".vid1").show();
        });


        jQuery(".closevid, this").click(function(e){
            e.preventDefault();
            jQuery(".vid1").hide();
        });

    });
</script>
0
0

(1) Have you included the jQuery library? Generally, it is included in the <head> section, like this:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

Ref: http://learn.jquery.com/about-jquery/how-jquery-works/

(2) Inside the jQuery document.ready wrapper, put an alert.

<script type="text/javascript">
    jQuery(document).ready(function(){
        alert("It works");
    });
</script>

If it pops up, then there are no syntax errors in the rest of your code. If it does not pop up, then delete everything except the alert statement (again, still within the document.ready wrapper -- make it look exactly like the above) and try again.

Make just that one thing work, then add back in the other parts, bit by bit.

1
  • Hi gibberish, yes I included it with a plug in, the document ready pops up. Thanks for the suggestion.
    – MoonLady
    Feb 27, 2015 at 1:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.