Async live-stream platform: How to remove elements from embeded web-page

https://livechannels.pages.dev/

by LandOfMightDev • 9 months ago

1 1 9 months ago

livechannels.pages.dev

So basically, i built this platfrom/webapp that allows users to take a list of video URLs and convert into into a sort of live-stream. The only issue i had was that when I tried to embed it into static html pages as a video player, the top banner for "create channel" and "support" would show in the videoplayer, which just looked gross.

After searching online, most people just said it goes against CORS to modify the elements in the iFrame, so here was my solution:

```<div style="position: relative;overflow: hidden;"> <div style="margin-top:-80px;"> <iframe src="https://livechannels.pages.dev/(ChannelName)" width="1300px" height="820px" frameborder="0" allowfullscreen> </iframe> </div> </div>```

Basically, you just need to use two divs, one to set the overflow as hidden, and another to cut the portion of the page. In my case, I wanted to cut the nav bar, which was the first 80px at the top of the website. The end result was pretty much perfect.

Proof of concept websites:

https://animaxreboot.pages.dev/ https://cartoonnetworkhq.github.io/CartoonNetwork/

Async live-stream platform: How to remove elements from embeded web-page

Related Stories