Youtube video popup

Question

I created a link in an image for when clicking on the image opens a popup centered on the screen with the youtube video, this working but what I did not know if it would be correct because phpstorm says it is wrong, but this working, someone can help me?

Link=>

<a <label onclick="PopupCenter('https://www.youtube.com/embed/INQcOCgpOXs','785','680')"
        style="cursor:pointer;"></label>
    <img style="margin-right: -4.5px; border:solid 1px #ffffff" class="espaco"  src="imagens/thumb/atomizador_250lts_25_thumb.png" alt="" />
</a>

Popup script =>

<script type="text/javascript"> function PopupCenter(pageURL, title, w, h) {
    var left = (screen.width / 2) - (w / 2);
    var top = (screen.height / 2) - (h / 2);
    var targetWin = window.open(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=650px' + w + ', height=450px' + h + ', top=100%' + ', left=' + left);
}
</script>

Answer 1

I believe that the error that Phpstorm is pointing is related to the link, because it does not make sense to tag <label> within the <a> as it is:

<a <label onclick="PopupCenter('https://www.youtube.com/embed/INQcOCgpOXs','785','680')"
    style="cursor:pointer;"></label><img></a>

The correct would be to remove the tag label, and place its contents in <a>. I also found that in function call PopupCenter() on the tag <a>, you are not passing the title as argument, the final code would look like this:

<a onclick="PopupCenter('https://www.youtube.com/embed/INQcOCgpOXs','Titulo do Vídeo','785','680')" style="cursor:pointer;"><img style="margin-right: -4.5px; border:solid 1px #ffffff" class="espaco"  src="imagens/thumb/atomizador_250lts_25_thumb.png" alt="" /></a>

Answer 2

I don’t know if this could be it but right at the beginning you’re creating a tag inside another:

<a <label onclick = "PopupCenter('https://www.youtube.com/embed/INQcOCgpOXs','785','680')" style="cursor:pointer;"></label>

I believe I would need to create the label within the to:

<a>
    <label onclick = "PopupCenter('https://www.youtube.com/embed/INQcOCgpOXs','785','680')" style = "cursor:pointer;"></label>
    <img style="margin-right: -4.5px; border:solid 1px #ffffff" class="espaco"  src="imagens/thumb/atomizador_250lts_25_thumb.png" alt="" />
</a>