I have a page and I wanted more than one slide show on the same page but that proves slightly difficult with JavaScript variables so I decide to make each slide show an iframe. This works rather well however now the responsiveness of the iframe is causing issues. The slides within the Iframe are div elements that will stack based on screen size. The issue is now that the Iframe does not get longer. I have tried:
<iframe src="Web.html" height="100%" frameborder="1" marginheight="0" marginwidth="0" scrolling="no"></iframe>
except that doesn't make the iframe long enough even before resizing. My question is, how do I make the Iframe as tall as the page is, and the page will be resizing?
Try Bootstarp Responsive embed.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Here is like: http://getbootstrap.com/components/#responsive-embed
I found a solution using the resizeIframe function
<iframe src="Other.html" frameborder="0" scrolling="no" onload="resizeIframe(this);"></iframe>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
Related
I'm embedding video that has an exit pop-up banner ads and video ads. When you
anywhere in video then popups open automatic or how to click on X icon to close banner ad.
.iframe{
width: 100%;
float: left;
margin-top: 5px;
}
<div class="iframe">
<iframe width="1000" height="600" src="https://www.youtube.com/embed/Sb_60g3u1LU" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
I am using other third party websites to host videos like vidzi.tv & openload.co and these sites are full with pop ups and banner ads in video player.
You can add sandbox attribute in your iframe. Only the values you add to the attribute will be allowed. Any value you do not add in the sandbox attribute will not be allowed by browser.
Sandbox attribute has following values:
allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
I have modified your code to include sandbox option, but have NOT added allow-popups, so popups will not be allowed in this iframe.
<div class="iframe">
<iframe sandbox = "allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation" width="1000" height="600" src="https://www.youtube.com/embed/Sb_60g3u1LU" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
You can find more about sandbox attribute here. Please note that this attribute is new in HTML5.
I used sandbox function in this code on my Streaming Site where i Embed 3rd Party iframe and they also have sandbox protection check but for that iv'e added removeAttribute in my JS so if you change src of the iframe from some other button you can click this button to add sandbox attribute to your iframe or you can also add the click function in your code where you get your iframe successfully.
//JS
window.onload = function(){
var button = document.getElementsByName("sandbox")[0]
var iframe = document.getElementsByName("framez")[0]
button.addEventListener('click',sndbx,false);
function sndbx(){
var nibba = document.getElementById("framez").src;
if(iframe.sandbox == 'allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation'){
document.getElementById("framez").removeAttribute("sandbox");
}
frames['framez'].location.href=nibba;
iframe.sandbox = 'allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation';
}
}
<!--HTML-->
<button name="sandbox">SandBox</button>
<iframe name="framez" id="framez" src="YOUR_SOURCE" allowfullscreen="true"></iframe>
I have tried to test other questions using StackOverflow, but I couldn't get it to work.
The frame will not scroll to the anchor.
<iframe src="http://coder0.weebly.com/browsers-images.html#B0" width="95%" height="50" target="_parant" id="comfra" frameborder="0" scrolling="no">
<p>Please click here</p>
</iframe>
The id is B0.
The iframe can't be used like that. Please check: What is iframe used for?
You can't add content to an iframe tag like that.
You can check this javascript solution:
Insert content into iFrame
Ok, I want to adjust the size of a large list of animated gif files to fit a given size Iframe, in which they will be displayed.
This is my animated .gif file list: (there will be 100+ files in this list)
<script type="text/javascript">
var pages=[];
pages[1]="1.gif";
pages[2]="2.gif";
pages[3]="3.gif";
pages[4]="4.gif";
pages[5]="5.gif";
pages[etc]="etc.gif";
</script>
(There are functions in the above script, but I edited it out for clarity.)
This is how I call my Iframe:
<iframe id="frame" src="" width="1600px" height="897px" hspace="0" vspace="0" frameborder="2" scrolling="no" ></iframe>
How can I scale ALL of the animated .gif images in a simple way, so each one fits the height of the Iframe?
The .gif files all have different sizes. Any help is much appreciated!
I have some links on my page and everyone is linked to a popup which should load an iframe with a dynamic source attribute. The iframe has a div called 'pholder' in which the iframe should be loaded. So on every link should be another iframe. But it isn't. It's always the same. To be exactly, it's always the last link and I don't know why. Here you can see the HTML of the popup:
<div id="toPopup3">
<div id="videoContainer">
<div id="activeVideo">
<div class="pholder"></div>
</div>
</div>
</div> <!--toPopup3 end-->
I have to say that my links all have the class toPopup3 link + e. e is the maximum of Videos (0-23). So I use this code to add the iframe:
var videoLink;
var split;
$('[class^="topopup3 link"]').each(function(){
videoLink = $(this).attr('href');
split = videoLink.split("/");
});
$('.pholder').html('<iframe src="http://player.vimeo.com/video/'+split[3]+'?title=0&byline=0&portrait=0&color=fc6626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
So it always shows the last source in the iframe and I don't get rid of it. Can someone help me?
Here is a link to the live version of the page: Live Page. The problem occurs at 'film production'. I also put console.log(split[3]); in the code to see the order of the links.
Edit: given a little more insight into your goal, I think it would be better to accomplish this with a clickhandler:
$('[class^="topopup3 link"]').on('click', function(){
var videoLink = $(this).attr('href');
split = videoLink.split("/");
$('.pholder').html('<iframe src="http://player.vimeo.com/video/'+split[3]+'?title=0&byline=0&portrait=0&color=fc6626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
// may need to show the iframe modal or whatever here
});
Your not doing anything with the split variable until you are done looping, therefore the value will be the last one. If you are wanting to use each value, you need to move your subsequent $('.pholder')... code into your each block
I'm currently trying to implement a content locking system to my site and as part of it would like to lock out an on-site mp3 player until the user has completed an offer.
So when the page loads it shows the player, but if they try to click on it, it pops up the content locker and once they've completed an offer it swaps the DIV for the fully usable player.
here's the code:
<div id="mobmp3">
<div id="yoursecDiv" style="display:block; z-index: 999;"> <a href="javascript:void(0)" onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://c.themixtapesite.com/locker.js?guid=0512eafd69b18d22');document.body.appendChild(fileref); setTimeout(yourFunction, 3000);">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%" height="280" max-width="97.4%">
</iframe>
</a>
</div>
</div>
<!-- Place the Real Link within yourfirDiv which is set to not display
until yourFunction has been executed. -->
<div id="yourfirDiv" style="display:none;">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2"
frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%"
height="280" max-width="97.4%"></iframe>
</div>
So, as you can see, i'm trying to load up an iframe (the player) within yoursecDiv. then once they've completed the offer it reloads yourfirDiv which is the same player but without the content locker.
I was hoping by wrapping the <iframe> in the <a> tag i would achieve this, but alas, it doesn't work.
So i guess my question is:
Is there a way i can overlay a div (or something) over the iframe to act as the link to open the content locker?
this is now solved... after a bit of fresh air my brain started working and i simply used a transparent gif that i overlayed over the div. then set that gif as the trigger link.