I am just wondering, is there anyway to resize a video that is inside an iframe? Below is the code I am working on, when I tried to resize the iframe, it only resizes the wrap and not the player itself therefore creating a scrollbar. Is there anyway to resize the video player itself?
<iframe width="600" height="370" src="http://online.fairytail.tv/s/googplayer.php?skintype=nemesis1&to=1002MJumgQZG&autostart=false&id=108994262975881368074/Ft1#5832691710150899906"></iframe>
iframe{
width: 600px; height: 370px;
}
you cant style the elements inside iframe from another domain
unless they give you the ability to change some parameters in url or something...
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
Here's your WORKING DEMO
$("button").click(function () {
$('embed').attr('width', '800');
$('embed').attr('height', '600');
});
Stackoverflow is not a code generator, that's why I only gave you a clue not a simple solution. It would be better if you can work out something and become your own knowledge. Id doesn't mean I don't really know how to.
Related
I am using iframe on my site. Now I want to make the scroll on the right side of the iframe invisible. I've searched the whole internet but all the codes I've found don't work.
This is my iframe
<iframe src="../pages.php" width="100%" height="650px" class="gitartik"></iframe>
last piece of code I tried
.gitartik{
overflow-y: scroll;
}
.gitartik::-webkit-scrollbar {
width: 0px;
}
``
CSS of the parent frame cannot affect an iframe, you have to include it in the source of the page loaded by the iframe.
JavaScript of the parent frame can add CSS to the page in the iframe, if both pages come from the same origin (which seems to be the case in your example).
To do so First of all remove this part below from the code
.gitartik::-webkit-scrollbar {
width: 0px;
}
Then go to your html and find the iframe for example:
<iframe src="exampleisfake.co.in">
Then edit the iframe tag as shown below:
<iframe src="exampleisfake.co.in" scrolling=no>
add just like shown above:
scrolling=no
I am using a simple iframe code;
<iframe src="http://caesium.x10.mx/test/index.html" allowtransparency="true" style="border:none" width="852" height="500"></iframe>
And inside http://caesium.x10.mx/test/index.html there is a working button (bottom right) but if you try to click this button on the iframed page (http://caesium.x10.mx/test/index.php) the button does not work.
Can anyone help me find a solution to this?
Thanks!
The code being used for the button.
<center><button onclick="ChangeSkin()">Change Skin</button></center>
<script>
function ChangeSkin() {
location.href = 'https://www.minecraft.net/profile/skin/remote?url=https://crafatar.com/skins/' + document.getElementById('username').value + '.png';
}
</script>
Is it possible the entire iframe is behind another transparent layer?
Try setting css properties:
EDIT:
Position:static;
z-index: 1000000; (or higher than any other elements)
You can do this either in a linked .css file, or within the head tags of the page like so:
<head>
<style>
#content{
Position:static;
z-index: 1000000;
}
</style>
</head>
I often find this to be the issue when ui elements are not functioning as expected.
Your transparent footer div is overlapping the iFrame. If I give your content div a positive z-index (like #content { z-index: 1; }), then the div containing your iFrame is layered on top of the footer, and all the buttons start working again.
Iframes are great, but from what I remember the entire Iframe is one button.
Thats because of exploits that broke out a long while back. The Iframe is basically a live updated screenshot.
I have however seen many that allow links.
So, I would try the other answers first.
I have solved this problem in bootstrap 4 by adding the following to my custom stylesheet:
iframe{
z-index:9999;
}
That seemed to do the trick
Chrome flickers when reloading content in iframes. Can this be avoided in any way, thinking of:
Wrapping a-links with js that does some magic.
Meta-tags in content-html. (I have source control over the html in the iframes)
Please note that the content-type in the iframe may vary (pdfs, html, images) so if ajax is the only way out here, does it reflect the http-content-type back to the iframe?
Please visit the demo at http://jsfiddle.net/2tEVr/
Excerpt of fiddle:
<iframe name="if" width="800" height="600"></iframe>
UPDATE
The solution that worked best for me was to replace regular href's with ajax-requests, repopulating the body-area, (solution 4 below) Flickering is gone but comes at a price of akward debugging since sync between content and "view-source" is lost on ajax-request.
Also, since the content-type in my case may change, the method for performing the ajax-request had to have some brains and possibly fall back to regular location request.
regards,
#user247245: From your question, its not entirely clear how you (want to) use the iframe. Does it reload periodically, or once when the whole webpage loads?
Solution 1: Different background color
In case you just want to avoid the ugly white, and avoid over-complication. Set a different background color in your HTML header of the framecontents.html file, like so:
<!DOCTYPE html>
<html style="background-color: #F48;">
This way, while the CSS file loads,parses, and gets applied, the background is not #fff.
Solution 2: Transparent iframe
While there is no content, the iframe should simply not be visible. Solution:
<iframe src="/framecontents.html" allowTransparency="true" background="transparent"></iframe>
Ofcourse dont use this in combination with solution 1, you'll shoot yourself in the foot.
Solution 3: Preload iframe page
In case you are loading the iframe later (such as user clicking a link), consider preloading its contents. Hide this in near the top of your (parent) page:
<iframe src="/framecontents.html" style="position: absolute; width: 0px; height: 0px"></iframe>
But i'd advise using solution 2 instead.
Solution 4: If doing a mobile web interface:
See how jQuery Mobile did it. We built a web interface that had to feel like a native app, so without reload flashes. jQM fixed that. Basically does a background ajax call to retrieve the full HTML contents, then extracts the body (the "page" div to be more precise) and then replaces the contents (with a transition if you like). All the while a reload spinner is shown.
All in all this feels like more like a mobile application: no reload flashes. Other solutions would be:
Solution 5: Use JS to inject CSS:
See answer by jmva, or http://css-tricks.com/prevent-white-flash-iframe/ .
Solution 6: use JS to inject CSS (simple version)
<script type="text/javascript">
parent.document.getElementById("theframe").style.visibility = "hidden";
</script>
<iframe id="theframe" src="/framecontents.html" onload="this.style.visibility='visible';"></iframe>
You could ofcourse leave out the <script> part and add style="visibility:hidden;" to the iframe, but the above would make sure that the frame is visible for visitors with JS disabled. Actually, i'd advise to do that because 99% of visitors has it enabled anyway, and its simpler and more effective.
A common trick is to display the iframe just when it's full loaded but it's better to not rely on that.
<iframe src="..." style="visibility:hidden;"
onload="this.style.visibility='visible';"></iframe>
The same trick a bit optimized using JS.
// Prevent variables from being global
(function () {
/*
1. Inject CSS which makes iframe invisible
*/
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
/*
2. When window loads, remove that CSS,
making iframe visible again
*/
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
Extracted from css-trick
If you have to switch between different sites and that trick of onload isn't working the only viable solution would be destroy and create the iframe programatically.
Try adding transform: translate3d(0, 0, 0); on a parent element.
I had an issue where the iframe was taller than its parent (parent has overflow: hidden). The iframe's overflown portion was flickering on each video loop on Chrome (YouTube iframe API).
Forcing hardware acceleration this way was the only thing that worked for me.
A simpler solution that worked in my case was just adding this CSS to the iframe
will-change: height;
min-height: 400px;
i have a rather strange question:
Is there a possibility to open a only a specific div element of a website in my browser?
The reason why i want to know is, because i want to embed only the stream element of this website:
http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001
The page is rather new, so they dont offer a share embed code function yet, therfore i thought about creating an Iframe which shows the stream, like this:
<iframe height="433" width="770" frameborder="0" src="http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001"></iframe>
While this iframe shows the whole site, i want only to show the stream element. I checked the code of the side and the div element called "player-wrap" shows pretty much what i need.
Any ideas?
Your best option may be to contact them and request embed functionality. It's maybe not their top priority so if you must, a possible workaround could be this (modified from the SO post found here).
div{
width: 960px;
height: 424px;
overflow: hidden;
}
iframe{
position: relative;
top: -300px;
width:100%;
height:800px;
}
<div>
<iframe src="http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001" autoscroll="false"></iframe>
</div>
http://jsfiddle.net/daCrosby/5PMyu/
I think the best way to do it is to use jQuery's load function to return the iframe.
For example your code would be this which would return the wrapping div of the video which is called .palyer_wrap and insert it into #target-div.
$('#target-div').load('www.azubu.tv/channel/live_small.do?cn_id=2196420951001 .palyer_wrap');
How could I create a preview of a webpage? Using iframe, I could not scale down the contents of the page in order to create a nice looking overview.
The following fails
<iframe src="/mplahmplah#important_stuff" style="width:700px; height:900px; -moz-transform:scale(0.15, 0.15)" sandbox="" seamless scrolling="no"></iframe>
If the domain of the iframe and the container page is the same and you are using jQuery, try something like this:
$(function(){
$('iframe').on('load', function(){
$(this).contents().find('body').css({'-webkit-transform':'scale(0.15, 0.15)', '-moz-transform':'scale(0.15, 0.15)'});
});
});
The point is that you don't want to scale the iframe, you want to scale it's contents.