Jump to content

Make youtube video play on click of image

webdeveloper123

By webdeveloper123
in Javascript Help

 Share
Go to solution Solved by kicken,

Recommended Posts

webdeveloper123 Advanced Member

webdeveloper123

Posted
Posted

Hi Guys,

I have a webpage where there are images of movie posters and when I click that image it loads the trailer from youtube. Thing is, after I click the image, I then have to click play on the youtube video for the video to play. What I wanted was for the video to start playing automatically when the image is clicked. I was searching around and came across this: https://github.com/sricharankrishnan/click-image-play-youtube-video

I looked at the demo and it was perfect. I then tried to implement the plugin. So I downloaded the JS file from the plugin-bundle-files folder. Then then guide says to reference the JS files in the script tag, which I did. Then it says to go into Console and type: new YoutubeOverlayModule

I kept getting this error: 

Failed to load resource: the server responded with a status of 404 ()
new YoutubeOverlayModule
VM72:1 Uncaught ReferenceError: YoutubeOverlayModule is not defined
    at <anonymous>:1:1
(anonymous) @ VM72:1

until I realised there was an updated JS file in the update section. So I used the updated JS file and I stopped getting the above error. But then after I inputted  new YoutubeOverlayModule I get a new error: 

Error: Youtube overlay requires a request object argument.
    at new YtConst (youtube-overlay.js:36:15)
    at <anonymous>:1:1
YtConst @ youtube-overlay.js:70
(anonymous) @ VM211:1
YtConst {}

So my question is - is this plugin out of date or Am I doing something wrong? Here is my HTML: 

<!DOCTYPE html>
<html>
<head>
  <title>Movie Quiz</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto&family=Oswald">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/youtube-overlay.css">
   
    <script src="js/mag-popup.js"></script>
   <script src="js/youtube-overlay.js"></script>
  

    

    <link rel="stylesheet" href="css/magnific-popup.css">

 <script>
    $(document).ready(function() {
      $('.popup-youtube').magnificPopup({
        type: 'iframe'
      });
    });


    </script>
<style>


</style>
</head>
<body>



<header>Movie Quiz</header>

<div class="leftContent">
  <h2>CREED 3 OUT NOW!</h2>
  <img src="images/creed3.jpg">

  <p><SPAN STYLE="font-family:'Roboto'">When a childhood friend and former boxing prodigy, Damian (Jonathan Majors), resurfaces after serving a long sentence in prison, he is eager to prove that he deserves his shot in the ring.</p></SPAN> 

  <h2>SREAM 6 IN CINEMAS!</h2>
   <img src="images/scream6.jpg">
 <p><SPAN STYLE="font-family:'Roboto'">Following the latest Ghostface killings, the four survivors leave Woodsboro behind and start a fresh chapter.</p></SPAN> 
</div>

<div class="rightContent">
  <h2>NEW & UPCOMING MOVIE TRAILERS</h2>

<h2><SPAN STYLE="font-family:'Roboto'">AIR</h2></SPAN>


<a href="https://www.youtube.com/watch?v=Euy4Yu6B3nU" class="popup-youtube">
  <img class="hovering" src="images/air_poster.jpg">
</a>



<p><SPAN STYLE="font-family:'Roboto'">From award-winning director Ben Affleck, 'Air' reveals the unbelievable game-changing partnership between a then rookie Michael Jordan and Nike's fledgling basketball division which revolutionized the world of sports and contemporary culture.</p></SPAN> 

 
<h2><SPAN STYLE="font-family:'Roboto'">WHAT'S LOVE GOT TO DO WITH IT?</h2></SPAN>  

<a href="https://www.youtube.com/watch?v=0LqOp2MNwao" class="popup-youtube">
  <img class="hovering" src="images/whats_love.jpg">
</a>

<p><SPAN STYLE="font-family:'Roboto'">In London, an award-winning film-maker documents her best friend's journey into an assisted marriage in line with his family's Pakistani heritage. In the process, she challenges her own attitude towards relationships.</p></SPAN> 




</div>


<footer>

 <p><SPAN STYLE="font-family:'Roboto'">Classic Productions</p></SPAN> 
</footer>
 
</body>
</html>

Many thanks

Link to comment
Share on other sites
kicken Prolific Member

kicken

Posted
Posted
45 minutes ago, webdeveloper123 said:

But then after I inputted  new YoutubeOverlayModule I get a new error

The constructor requires a configuration object.  The instruction to type that into the browser console was just to verify the library loaded properly and the constructor exists.  Now, you move on with the rest of the instructions in the README file.  Step 5 gives you an example of how to implement it, with the config object.

 

Link to comment
Share on other sites
webdeveloper123 Advanced Member

webdeveloper123

Posted
  • Author
Posted

Thanks kicken.

Still having problems with it. I got up to step 6 and it's asking to: 

After writing the code in the way shown above, you've got to deploy it into your web app (otherwise its not going to work). Use the available deployment method as shown below:

  videoBuild.activateDeployment();

I put it in console and got the following: 

youtube-overlay.js:70 
        
       Error: Youtube overlay requires requestObject with mandatory props which are of string types.
    at new YtConst (youtube-overlay.js:44:15)
    at (index):38:18
YtConst @ youtube-overlay.js:70
(anonymous) @ (index):38
/favicon.ico:1 
       
        
       Failed to load resource: the server responded with a status of 404 ()
new YoutubeOverlayModule

youtube-overlay.js:70 
        
       Error: Youtube overlay requires a request object argument.
    at new YtConst (youtube-overlay.js:36:15)
    at <anonymous>:1:1
YtConst @ youtube-overlay.js:70
(anonymous) @ VM339:1
YtConst {}
  videoBuild.activateDeployment();

youtube-overlay.js:104 
        
       Error: Youtube Overlay Constructor -> Not able to locate the required Trigger-Element. Can you please check id? ---> undefined
    at cpo.triggerCheck (youtube-overlay.js:96:15)
    at cpo.createPlayerContainer (youtube-overlay.js:89:11)
    at cpo.activateDeployment (youtube-overlay.js:77:11)
    at <anonymous>:1:14
cpo.triggerCheck @ youtube-overlay.js:104
cpo.createPlayerContainer @ youtube-overlay.js:89
cpo.activateDeployment @ youtube-overlay.js:77
(anonymous) @ VM345:1
undefined

Here is my code (only showing relevant parts) 

    <script>
      var img = $("#triggerplay");
var configObject = {
  sourceUrl: img.attr("data-videourl"),
  triggerElement: "#" + img.attr("id"),
  progressCallback: function() {
    console.log("Callback Invoked.");
  }
};

var videoBuild = new YoutubeOverlayModule(configObject);



    </script>

<a href="https://www.youtube.com/watch?v=Euy4Yu6B3nU" class="popup-youtube">
  <img class="hovering" src="images/air_poster.jpg" id="triggerplay" data-videourl="https://www.youtube.com/embed/Euy4Yu6B3nU"/>
</a>

Thanks

Link to comment
Share on other sites
kicken Prolific Member

kicken

Posted
Posted

You are referencing elements before they exist (since they come after the <script> in your document.

What you should do is wait for the DOM to be fully parsed before you start trying to interact with it in your scripts.  With jQuery, you accomplish that like so: 

jQuery(function($){
  //Put your code here
});

 

Link to comment
Share on other sites
webdeveloper123 Advanced Member

webdeveloper123

Posted
  • Author
Posted (edited)

I get it, when it tries to create the var image it hasn't encountered the element triggerplay so it won't create it. But if you look at the script above that one, I am basically doing the same thing. Because: 

$('.popup-youtube').magnificPopup

hasn't encountered the class .popup-youtube but the code still works.

If I nest the script inside a: 

$(document).ready(function()

will that make it work?

 

Or even a: 

jQuery(function($){
  //Put your code here
});

Like you suggested?

Edited by webdeveloper123
Link to comment
Share on other sites
webdeveloper123 Advanced Member

webdeveloper123

Posted
  • Author
Posted

I've come up with this: 

$(document).ready(function(){

      var img = $("#triggerplay");
var configObject = {
  sourceUrl: img.attr("data-videourl"),
  triggerElement: "#" + img.attr("id"),
  progressCallback: function() {
    console.log("Callback Invoked.");
  }
};

var videoBuild = new YoutubeOverlayModule(configObject);


});

But when I type: 

videoBuild.activateDeployment();

Into the console it gives me the error: 

 videoBuild.activateDeployment();
VM72:1 Uncaught ReferenceError: videoBuild is not defined
    at <anonymous>:1:3
(anonymous) @ VM72:1

 

Link to comment
Share on other sites
  • Solution
kicken Prolific Member

kicken

Posted
  • Solution
Posted
2 hours ago, webdeveloper123 said:

But when I type: 

videoBuild.activateDeployment();

Into the console it gives me the error:

The variable is undefined because of how variable scope works in JS.  Variables are limited to the function they are defined in.

 

Regardless, you shouldn't be typing that into the console, it should just be part of your script.

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.