Search code examples
javascriptembedreal-timehtml

How to embed real-time tracking webpage livefromspace.com

How do I embed the entire real-time tracking site, livefromspace.com?

When I go to livefromspace.com, there is no option to Share > Embed Code to copy to webpage

enter image description here

I have tried googling a solution to this, and even posted on Web Development site, but they put it on hold, even though I was very very clear about what I am asking.

Any guidance is most appreciated!

Both the introductory page and the real-time page have the same ip address, www.livefromspace.com. When you click "Explore Earth" on the introductory page, it takes you to the real-time page. However, I notice that when I hover over "Explore Earth", the lower left part of the browser displays www.livefromspace.com/#!, but when I enter that into the iFrame code given by Anuj Yadav, I still get the Introductory page, see photo below enter image description here

Solution

  • You can use an IFrame to embed the webpage in your website. 

    <style>
.embed-container 
{ 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%;
    height: 100%; 
}
</style>

<div class='embed-container'>
    <iframe src='http://livefromspace.com' frameborder='0' allowfullscreen>

    </iframe>
</div>

    Check this Fiddle