Online iframe ads with close button - javascript

This is my ad code:
<iframe style="display:block !important" frameborder=0 marginwidth=0 marginheight=0 scrolling=no width=120 height=600 allowtransparency=true src="//s.ato.mx/p.html#id=2225&size=120x600"></iframe>
My website is in WordPress.
I would like to add this code as floating on left-side and right-side of my website with close button.

Related

I want to show my video in full size on my page

I have an iframe tag and in which I want to show video in full size in any screen like youtube but currently, it shows in small size not fit all area.
My code:
<div class="row">
<iframe oncontextmenu="return false" class="video_container" style="width:90%;height:450px;" src="<?php echo $videoDetail[0]['video_links'];?>?autoplay=1" frameborder="0" allow="autoplay" allowfullscreen></iframe>
</div>
As per image you can see a video not fit in all areas.

How do I make iframes responsive without using div?

I learnt from this post (Making an iframe responsive) that make an iframe responsive by adding a container with a class around the iframe, for instance,
<div class="intrinsic-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>
</div>
Is there possible to embed <iframe>...</iframe> directly in my posts (without using <div>...</div>)? And I tried these solutions, but all of them don't work.
PS: I use two columns layout in WordPress. The ratio of video can be 16:9 (from YouTube), 4:3 (from Tencent), etc. Here is a temporary demo.
If you can use viewport units that is doable without an extra wrapper element.
Full page width:
iframe {
width: 100vw;
height: 56.25vw; /*16:9*/
}
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>
Half page width:
iframe {
width: 50vw;
height: 28.125vw; /*16:9*/
}
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>
The key here is the height and width ratio you want to keep. I took the liberty of using jQuery instead of javascript to do this. The code triggers upon clicking the button. It calculates the width and height ratio of the iframe and adapts both to your needs (in this case I assumed you wanted it to fill the containers width).
You'll probably want to loop through all videos if you have multiple on one page and run the code on window resizing and page-loading.
Here is the JSFiddle
Hope it helps :)
html
<iframe id="iframe" width="640" height="360" src="https://www.youtube.com/embed/4SDVkdcO8ts" frameborder="0" allowfullscreen></iframe>
<button id="button" style="float: left">Click me!</button>
jQuery
$(document).ready(function(){
$("button").click(function(){
var ratio = $("#iframe").height() / $("#iframe").width();
$("#iframe").width("100%");
var newWidth = $("#iframe").width();
$("#iframe").width(newWidth);
$("#iframe").height(newWidth*ratio);
$("button").text("resize the window and click me again!");
});
});
Use bootstrap class to make iframe responsive.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" allowfullscreen
src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" >
</iframe>
</div>

hide scrollbars iFrame child website

Using Colorbox jquery plugin, I use the iFrame popup class to display websites. Usually this works just fine, except when the website I am opening has larger than normal width. If that happens, The website will show horizontal scrollbars.
Here is the Colorbox code I use in my <Head>
<script>
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"100%", height:"90%", scrolling: false});
</script>
Here is the link I use to open website
<a class="iframe" href="client.php?id=<?php echo $rows['id']; ?>&Client Name=<?php echo $rows['client_name'] ?>">
If the website that opens is pretty standard dimensions, there will be no scrollbars or anything which is perfect. If the website it opens is very wide, it will show scrollbars and look bad. I would like to hide the scrollbars no matter what.
Here is an Example
Is there any to hide scrollbar in this situation? I tried inspecting with chrome, but when I try adding a Overflow: hidden to IFRAME element, it does NOT hide.
You can do it like this:
<iframe src="https://css-tricks.com" width="100" height="100" style="overflow-y: hidden;" seamless="seamless" scrolling="no"></iframe>
add style="overflow-y: hidden;" seamless="seamless" scrolling="no" to your <iframe>
See fiddle example: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/27/

Wrap href around an iframe

I want to wrap an href around a vimeo or youtube video and prevent the default playback click events of the embed and just go to the href. Does anyone know how to do this?
<a href="http://tumblr.com" target="_blank" class="linkwrap">
<iframe width="420" height="315" src="https://www.youtube.com/embed/5Xbs60BMeRU" frameborder="0" allowfullscreen></iframe>
</a>
html
<a href="http://tumblr.com" target="_blank" class="linkwrap">
<div class="blocker"></div>
<iframe width="420" height="315" src="https://www.youtube.com/embed/5Xbs60BMeRU" frameborder="0" allowfullscreen></iframe>
</a>
css
.linkwrap { position:relative; display:inline-block; }
.blocker { position:absolute; height:100%; width:100%; z-index:1; background:rgba(255,0,0,0.5); }
.linkwrap iframe { z-index: 2; }
jsfiddle - here
Use a div as overlay and surround it with your a tag. Read this article to see how to implement the div and using opaque for youtube: https://stackoverflow.com/a/4788044/4375900
I think with this info you should be possible to do what you want to do.
For cross browser support use this:
<div style="position:relative;">
<iframe width="420" height="315" src="https://www.youtube.com/embed/5Xbs60BMeRU" frameborder="0"></iframe>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="420px" height="315px">
</div>
I feel like it's worth mentionning that in my case, adding pointer-events: none on the iFrame allowed the link to work with a structure looking like this
<div>
<a href="#test">
<iframe [ATTRIBUTES]></iframe>
</a>
</div>

Dropdown form navigation on the same page as another form

I'm looking to create a dropdown menu on our website that will appear on all pages in our navigation and is used to navigate to a set of particular brand pages. This is what I'm using:
<form>
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value" style="font-weight: normal; width: 170px;">
<option value="">Select a brand...</option>
<option value="brand-a.html">A</option>
<option value="brand-b.html">B</option>
</select>
</form>
It works great, however there is a conflict between it and the other form(s) that may show up on the same page of our site (ie., shopping cart page, billing/shipping info). For example, you fill in your billing info, click submit, and an error comes up from our shopping cart - I'm guessing because the brand form above doesn't have an option selected, and it's trying to submit that first.
Is there any way to have both forms on the page?
Please let me know if I can provide any additional details to help resolve this issue.
Thanks!
Simply remove the form encapsulating the select tag. In HTML5 this is valid.
You can use frame to show more than one form in the same page. In the below code, I have shown 3 forms.
<frameset frameborder="0" border="0" bordercolor="#FBE134" framespacing="0" rows="125,*" frameborder = "0" framespacing = "0" border = "0">
<frame frameborder="0" noresize scrolling="no" name="framTop" src="header.php" frameborder="0" marginwidth="0" marginheight="0">
<frameset frameborder="0" cols="170,*">
<frame frameborder="0" name="framLeft" noresize scrolling="no" src="" frameborder="0" marginwidth="0" marginheight="0">
<frame frameborder="0" marginwidth="1" marginheight="1" noresize name="framRight" src="">

Categories

Resources