How to Make an Object Visible or Hidden Using Javascript

Question

I have a button that when pressed I want to hide a video that is contained in the index.html file. Within the video's script tag I have given it the id="videoOne". When exporting to html5 using the console window and running the exact same getElementByID command below it works as expected, but does not work by pressing the button which has it.

func _on_VideoButton_pressed():
        var document = JavaScript.get_interface("document")
        document.getElementById("videoOne").style.visibility = 'hidden';

I tried to eliminate obvious things like making sure the button was connected and by running a print function which does fire. I Also did a console log after the command shown above which also works. The video element still remains visible however.

Is there something that I might be missing? Any help would be appreciated thank you.

--

Edit:
I still don't have an know why the above code does not work, but I did find a solution.
Rather then run the code inside Godot I added a function to the index.html and simply call that function from within Godot. This may be the intended way it is supposed to work?

Within GODOT:

    func _on_VideoButton_pressed():
         JavaScript.eval("hideVideoOne()")

Within HTML Document:

<script>
    function hideVideoOne() {
        document.getElementById("videoOne").style.visibility = 'hidden';
    }
</script>