How to block pop-up, banner ads and video ads in iframe? - javascript

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>

Related

How do I make a frame compatible with anchor

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

Iframe mobile responsivness

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';
}

Facebook Iframe color theme

Can someone explain why Facebooks iframe colorscheme not working?
In fact, it does work with Javescript SDK.
Why doesn't it work with Iframe? Have tried to add ( data-colorscheme="dark" ) to the iframe with no succes.
https://developers.facebook.com/docs/plugins/like-button
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FAdamskyMotorkylareAb%2F%3Ffref%3Dts&width=240&layout=standard&action=like&size=small&show_faces=true&share=false&height=80&appId" width="240" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="false" colorscheme="dark"></iframe>
Have tried to add ( data-colorscheme="dark" ) to the iframe with no succes.
Those data attributes are evaluated by the JS only. When you use the iframe version, Facebook has no way to even read that attribute, because it is in a document from a different domain.
For the iframe version, you need to pass it as parameter in the URL:
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.
com%2FAdamskyMotorkylareAb%2F%3Ffref%3Dts&width=240&layout=standard&...&colorscheme=dark" width="240" hei

Google Doubleclick DFP include click macro in an iframe creative

I have an ad served through DFP that is coming from an iframe. I can count impressions, but not clicks (at first clicks were equal to impressions!).
The iframe is currently set up like this in DFP:
<iframe src="http://website.int/dev.php/en/dynamicBanner/728x90" click=%%CLICK_URL_UNESC%% width="728" height="90" scrolling="no" frameborder="0" marginheight="0" marginwidth="0"; " ></iframe>
The developer has the click macro appended to the href/URL:
<a href="http://website.int/dev.php/en/news/industry-news/info?click=clickmacro" class="inner-item" target="_blank">
What has to be changed and where in order to count impressions and clicks properly?

DIV swap onclick

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.

Categories