I need your help.
I have the code ready: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img
It works all right for me.
But I don't know the html markup. And I need the picture to open full screen. Not <iframe>.
For that I don't know. How would I get it out of <iframe> full screen.
<iframe width="468" height="60" allowTransparency></iframe>
Thank you for your help.
Use a css property to cover up your background image.
background-image: cover;
Related
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">
Let's say I have an iframe hosted on www.my-iframe.com. And let's say that my iframe is embedded in a page on a different domain using:
<iframe src="http://www.my-iframe.com" scrolling="no" height="500" width="100%"></iframe>
Please note that the iframe tag has the attribute scrolling="no".
I only have access to edit the iframe code, not the pages on which my iframe is embedded. This makes it so I cannot change the scrolling attribute of the iframe html tag or the overflow: hidden; css styling of the iframe.
Is there a way that I can force a scroll bar to appear when necessary from within the iframe code?
Any help/advice is appreciated!
What you could try is maybe using a JS library to simulate a a scrollbar, there are plenty of them on the internet.
Here are a few examples (neither unordered nor necessarily the best ones): iScrollJS
fullPage.js
jQuery scrollbars
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
I'm having a really strange issue with vimeo & html5 fullscreen player.
I have this code in my template :
<iframe src="http://player.vimeo.com/video/91593219/?autoplay=1" width="100%" height="615" frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>
The iframe loads fine, but when I click "fullscreen", the browser goes in fullscreen mode with the video appearing UNDER the site (I have relative and absolute divs visible while watching the video).
You can experiment this bug here : http://webrelais.net/pingpong/projet/proxipolis
Has anyone experienced this issue ?
Thanks a lot for your help !
I solved the problem by disabling animate.css style on the element which included my iframe.
Nevertheless, I tried with z-index modifying, jQuery for changing styles but nothing worked, the only one solution was removing Animate CSS class.
Was the same bug in Safari (13.0.4). In my case parent div of an iframe had will-change property. Fullscreen works correct after I've removed it.
A quick look shows that it is related to CSS or Javascript for the element - since removing the id for that element makes fullscreen video work in Chrome at least.
Solve the problem by isolating CSS and Javascript that you use for that element and you should be able to find what causes it.
animation-fill-mode: both; in parent elements seems to cause this issue with fullscreen videos.
I tried to attach another website to my current page using iframe,
but it looks ugly with the scroll bars.
Is there any good alternative to it?
Any suggestion to achieve what I want, nicely attaching another webpage into my page without the annoyance of those scrollbars?
Make height and width of iframe equal to your web page and if you want on a specific part of page then adding css overflow : none should help, and frameborder:0 will clean up frame borders..
Here is a good tutorial regarding scrolling
Change the height and width accordingly
Try this
<iframe height="100%" frameborder="0" scrolling="no" width="500px" style="width: 500px; height: 100%;" src="http://example.com" allowtransparency="true"></iframe>
Or try to use a custom scrollbar like this one: Link
Ok I had the same problem and this jquery plugin solved this problem perfectly.
http://plugins.jquery.com/project/iframe-auto-height