How to put an external object into WordPress to that occupies most of the available space?

Question

I have a WordPress site. I want to insert into one of its pages another page, written in AngularJS. That page is a Spring Boot system and will be hosted on a different machine than the WordPress page.

When I embed that external component into my WordPress I want it to occupy as much space on the screen as possible (see the green rectangle in the screenshot below).

If I simply insert it into a page in the usual way (like I insert YouTube videos), then the width of the component is limited by the width of the content part (red rectangle). That's not an option, I need more space.

How can I

1. put an external component into a WordPress site,
2. so that it occupies the entire width of the page and
3. all other pages are not affected by this change (have the same theme etc.)

?

Answer 1

Not really a wordpress question, and except for the last option you might get a different and maybe better answers on stack exchange.

Three options one ugly, one requires extra work and one is super hard but might be the right thing to do.

Ugly: Put the external object in an iframe and write some JS that will autommatically adjust the width and height of the iframe to the avaialable space. bonus points for handling browser resize events

Extra work: Use some Jquery code (Don't have to, but that is what everybody does) to load the external object into memory. Parse it and insert the relevant part into a div on a page (use a shortcode to indicate the location of the div for non techi users)

super hard: change the external site to support oembed and return the relevant html for requests, change your wordpress to recognize the external site as a valid source for oEmbed. In the post insert the relevant url on the external site.