Capture and hide elements of an Iframe in JavaScript

Next, I have a web application where I stream an application using Hangouts On Air. I incorporate the iframe that is generated for me from youtube and game on my website. But I would like to block or make it difficult to access this video on YouTube, but by default the YouTube icon will start when you start the video, even blocking all the controls it gets. So I got the solution to hide the corresponding class in html, I am using the following function in JS:

function HideElementYT()
{
   var x = document.getElementsByClassName("ytp-watermark");
   var i;
   for (i = 0; i < x.length; i++) {
        x[i].style.visibility = "hidden";
   }
}

This function is exactly what I need. But it works in parts. Because opening the console through the browser and running this code does not work. But if I inspect the page element corresponding to the class, "which is class where the link that redirects to youtube" and run the code again it works. It is as if it were invisible at first and could only be seen after I went there and visualized it. This was the simplest solution I could do, but it does not work. Is there a way to fix this, or another way to hide this div?