Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Async live-stream platform: How to remove elements from embeded web-page (livechannels.pages.dev)
1 point by LandOfMightDev 10 hours ago | hide | past | favorite | 1 comment




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/




Consider applying for YC's Winter 2026 batch! Applications are open till Nov 10

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: