How to add onClick event on embed tag?

Question

I want to add onclick event on embed tag but the problem is,it is not working on chrome and the handler is not working.Other than onclick event mouseover and mouseleave are working.here is the code HTML

<embed src="http://localhost/credit-app1/" onclick="increaseSize()" onload="bottomRight()">

JAVASCRIPT

function increaseSize(){
    var embedtag = document.querySelector("embed");
    if(embedtag.style.width == "400px"){
        embedtag.style.width = "100px";
        embedtag.style.height = "100px";
    }else{
        embedtag.style.width = "400px";
        embedtag.style.height = "500px"; 
    }
    console.log(embedtag)
}

Answer 1

you could just do it with pure css using the hover effect:

embed:hover {
  transform: scale(2.5);
}

Im not sure how it should work with onclick(), because the content inside will never have the click Event...

OR:

You could try to lay a transparent <div> over the embeded content:

<div style="height: 100px; width: 100px; position: absolute; top: 0; background-color: transparent;" onclick="increaseSize()"></div>
<embed src="http://localhost/credit-app1/" onload="bottomRight()" style="position: relative;">

in the JavaScript you need too resize the div too.