CODEWITHSUNDEEP
javascriptjqueryvideoiframe
Dom
Dom

Reputation: 343

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

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.

Upvotes: 15

Views: 25842

Answers (3)

vivek singh
vivek singh

Reputation: 19

Use sandbox after loading Iframe so if someone blocks the sandbox it will still work.

<script>
var frames = document.getElementsByTagName('iframe');
for (var frame of frames) {
    frame.setAttribute("sandbox", "allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-scripts allow-top-navigation allow-forms");
}
</script>

Upvotes: 1

c0de b0unty
c0de b0unty

Reputation: 193

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>

Upvotes: 2

DarthWader
DarthWader

Reputation: 1046

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.

Upvotes: 21

Related Questions