How can I force hide a div that render on my page?

Question

I integrate tlk.io chat API on my page

For requirement, my goal is to hide that header bar, and keep the rest.

---

I use Google Chrome Tool to inspect, and I got this :

I also grab this

<header id="header" class="header">
  <div class="header-bar">
      <a class="header-avatar" href="http://tlk.io">tlk.io</a>
    <span id="channel" class="header-channel">keystone</span>
    <span class="header-status is-hidden" title="Online"></span>
  </div>
</header>

---

I've tried CSS

       <style type="text/css">
        #header.header-bar{
          display: none;
        }

        </style>

---

JS

<script>
$('#header.header').hide();
console.log('Run');
</script> 

I got the word run to display on the console, but that banner still there.

Any hints ? What did I do wrong ? Is it even possible to do ?

Answer 1

The tlk.io embed code appears to use an iframe.

Due to the same-origin policy , you will be unable to affect its contents.

edit: It looks like they let you inject a custom CSS file via their embed tool. Using it to change the interface or remove their branding might get you shut down, though.