CODEWITHSUNDEEP
javascripthtmlcssiframehtml5-fullscreen
Guru Prasad
Guru Prasad

Reputation: 4223

Making an element fullscreen within an iframe

I'm working on a browser extension that allows me to modify content of other websites.

I know about allowfullscreen and how to make an element within an iframe appear fullscreen and take up the entire viewport. But, in this question, I want to find out how I can coerce an element to go fullscreen within an iframe.

Scenario:
Websites like HBO, use position: absolute on nearly every element in their page including the video element. When you try to fullscreen a video on their page, they determine the size of the viewport and scale elements accordingly by changing several nodes' width and height properties. This, when combined with hiding of unnecessary elements gives users a good fullscreen experience. As a result of their approach, it is extremely difficult to modify the CSS of these elements by hand.

Setting position: fixed; top: 0; left: 0; width: 100%; height: 100%; on the video element doesn't really work as, at the very least, you would also need to style the video's controls.

Is it be possible to allow an element to go 'fullscreen' but only within the confines of an iframe? Please note that the website's Javascript code must execute as though it is successfully switching to fullscreen, but just confined to within the iframe.

Upvotes: 0

Views: 565

Answers (1)

Nouman Ejaz
Nouman Ejaz

Reputation: 159

Mostly the body has default margins in most of the browsers. You should try this code in the page with ifrmae:

* {
   margin:0;
}

or

body {
    margin:0;
}

Upvotes: 1

Related Questions