1

I have this iframe where I embedded a youtube video but the issue is that onclick handler does not work on this iframe. Another issue is that I want to write something on the iframe but that does not seem to be happening even if we insert a header inside iframe. Here is the code that i have . The code is in reactjs .

<div onClick={this.onClick} className="movieItem">
                <iframe width="400" height="300" src={youtubeVideoUrl}>

               </iframe>
               <span className="title"> {movie.EventTitle}</span>
              </div>
satyajeet jha
  • 163
  • 3
  • 12
  • Possible duplicate of [How to add click event to a iframe with JQuery](https://stackoverflow.com/questions/1609741/how-to-add-click-event-to-a-iframe-with-jquery) – Blue Sep 13 '19 at 17:19
  • 1. You aren't setting an `onClick` prop on ``, which is just as well since iframes do not directly support click handlers (there are some workarounds, but probably not what you're after). 2. iframes do not render child nodes. – coreyward Sep 13 '19 at 17:28
  • 1
    Check out this answer, it will accomplish what you want - https://stackoverflow.com/a/16793204/1064310 – Tristan Sep 13 '19 at 17:34
  • you not have access to onClick iframe – Javad Khodadadi Sep 14 '19 at 05:26

1 Answers1

0

I have used react-iframe and useEffect hook. Find the element where you want to use click event and add it.

import Iframe from "react-iframe";
 
useEffect(() => {
    $('#pdf').on('load', function() {
     $('#pdf').contents().find("body").find('#slider').click(function(){
        console.log('work fine');
     });
   }
 }, []);
 
 return (
    <>  
      <Iframe
        url="localhost:3000"
        id="pdf"
      />
    </>
 );
Praveen Kumar
  • 101
  • 1
  • 5