Run on my webpage another .html page on small screen - javascript

I have created on my website an empty webpage, I name it NewGame.
I have an .html name itm.html and I want to make it run in small 300x300 screen on my page NewGame.html. As long as I didn't find anything how can I do that.
I have searched in here or google or I was trying to do with href but that will redirect me to another page and I don't want that to happen.
Is it possible to run itm.html inside another .html in small screen area, like a youtube small video?
Thanks in advance

If I understood you correctly, you should use an iframe.
<iframe src="/itm.html" width="300" height="300"></iframe>
Put that in NewGame.html. Since both HTML files are on the same domain, it will create a "window" into the other webpage.

You're going to want to read up on the venerable iframe element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
A quick example:
iframe.myCoolIframe {
width: 300px;
height: 300px;
}
<iframe class="myCoolIframe" src="https://example.com/itm.html"></iframe>

You can use the embed tag in html and style it to the size you want.
<embed src="https://www.w3schools.com/TAGS/tag_embed.asp" width="300" height="200">

Related

Loading percentage of iframe

How to show loading percentage of iframe tag with javascript? I am using iframe tag and my program takes some time to load my program. So I am thinking off to show the user how much it is being loaded yet now. I searched about it and I got to know that it's not possible to do it with HTML5, so I guess it can be done with js
EDIT:
<iframe width="800" height="600" src="https://www.greenfoot.org/scenarios/26460?embed=true" style="-webkit-transform:scale(0.4);"></iframe>

How can I detect video duration inside the iframe via jQuery/Javascript

Hello I'm trying to do an chrome extension,
my main purpose is detect videos on the page, and check if user watch 80% of video, some sites using iframe for videos openload, king, vk, mail.ru etc.
The main question is, am I supposed to write a specific function for every source or can I detect videos with simple tricks?
Many of sources using sort of hashing or whatever for security reasons, I can't find an specific dom element with jquery.
example site html:
<iframe id="episode_player" src="http://hqq.tv/player/embed_player.php?vid=264230257263260272277221239235213255194271217261258&autoplay=no" scrolling="no" frameborder="0" width="100%" height="495" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
my plugin:
var iframeR = $("iframe#episode_player").contents().find("video").get(0);
console.log(iframeR);
returns undefined.
for sources who use object tag, I tried this
var zazi = $("iframe#episode_player").contents().find("object").length;
console.log(zazi);
it returns 0
any idea, which can help me to find a way?
thanks.
If I understand this correctly, you can simply use Javascript for this:
W3Schools rocks
If not, correct me!

PDF inside iFrame not working on iOS

I have been trying to display PDF inside iFrame, it works well for all other browsers and platforms but not working with iOS. When I tried to access in chrome/Safari in iPhone/iPad, it shows the first page BUT does not allow to scroll down the PDF. And when it comes to HTML inside iFrame, it works perfectly, per my observation it looks like issue is with PDF inside iFrame on iOS. Tried all the links provided on various websites, overflow-auto, webkit scrolling, scrolling only y axis, position absolute/relative increasing the height which results in white pages and all other possible solutions, but no luck yet. The language of implementation is ASP.NET-C# where I am setting the iFrame source dynamically. Below is the source through which I am trying to achieve above task.
<div id="wrapper" class="Sales-container container">
<iframe runat="server" id="Contents" class="myiframe" scrolling="no" width="100%" height="100%" frameborder="0" />
</div>
.Sales-container{position:absolute !important;width:100%}
.container{margin-right:auto;margin-left:auto;padding-left:7px;padding-right:8px}
.myiframe{z-index:0;white-space:nowrap}
Any help would be much appreciated.
Thanks.
If you don't need https, you can use the google docs viewer
make the src http://docs.google.com/gview?url=YOURADDRESSHERE&embedded=true
If that won't work for you, I'm currently looking into pdf.js

iframe not working with safari/firefox

I'm trying to figure out why my images aren't displaying properly within my iframe. Every browser works fine with the exception of Firefox and Safari. I can still click the links within the iframe and open up the corresponding page, but the images just won't display. I am using the instansive instagram widget as my iframe content (instansive.com). Their code looks like this - >
<!-- INSTANSIVE WIDGET --><script src="//instansive.com/widget/js/instansive.js"></script><iframe src="//instansive.com/widgets/427ad0d8ae95cfc36f19bb10c960dbf03bbef870.html" id="instansive_427ad0d8ae" name="instansive_427ad0d8ae" scrolling="no" allowtransparency="true" class="instansive-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>
I'm not sure as to what I am doing wrong, or why it isn't displaying correctly with these two particular browsers.
There is nothing to do with iframe. Try giving the image path as /test/image.jpg instead of full path. This may work

How to change the src of an iframe to an embed src within an iframe?

This may sound a bit confusing at first but I will try to explain. I am trying to access the code of an embed tag playing a youtube video inside an iframe and have it change the src on an outside iframe when the inner embed container is clicked.
note:the external frame is a full website in the background of the myframe player. myframe is a mock video player.
heres the basic way the document is set up
<body>
<iframe id='myframe' src='something.htm'></iframe>
<iframe id='externalFrame' src='external.htm'></iframe>
</body>
//external.htm
<body>
<embed id='mediaPlayer' src='somethingElse.htm' >
</body>
external javascript
var myPlayer=document.getElementById('myframe');
var externalFrame=document.getElementById('externalFrame');
externalFrame.contentWindow.document.getElementById('mediaPlayer').onclick=function(){
var mediaPlayer=externalFrame.contentWindow.document.getElementById('media_player');
myPlayer.src=mediaPlayer.src;
}
For the record I hate iframes with the passion of 1000 suns, and would never use them usually but for this the media player has to keep playing when the page changes. and Iframes are good for mimicking that.
That should work fine just make sure that the link to the src is directed to the correct place in the structure.

Categories