Below is my google maps code which embeds a google map iframe into my website. However I need to know which part of the code gets rid of the description bubble as it is in the way and looks awful.
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps/embed/v1/vie?f=q&source=s_q&hl=en&geocode=Fef8HgMdTF8HACGtndVv4fvEAykHADl3VT_YRzGtndVv4fvEAw%3BFf-gHwMdtnoIACG4YnecgIb83ykH1S7ttDnYRzG4YnecgIb83w&q=mildenhall+to+raf+lakenheath&aq=&sll=52.387544,0.494041&sspn=0.099739,0.244446&ie=UTF8&ll=52.378862,0.524008&spn=0.035347,0.068778&t=m&saddr=mildenhall&daddr=raf+lakenheath&output=embed/v1/view"></iframe>
'&iwloc=near' no longer works with the new google api.
Thanks in advance
This answer :
Google Maps Embed - Remove Place Card
has a method of using a container div with overflow:hidden and a negative margin on the iframe to chop off the top containing the description bubble.
Just Add :
&iwloc=near in iframe src
Used like this:
<iframe width="400" scrolling="no" height="300" frameborder="0" src="https://maps.google.co.uk/maps?hl=en&q=so21+1aj&z=10&output=embed&iwloc=near" marginwidth="0" marginheight="0"></iframe>
Using jQuery I removed the bubble, from actual version of / place autocomplete version / google maps, modyfing one original function:
autocomplete.addListener('place_changed', function() {
// ... the function code, before it's closing
// tag I added 3 lines: //
$("div[class='gm-style-iw']").prev('div').remove(); // bubble
$("div[class='gm-style-iw']").next('div').remove(); // close button
$("div[class='gm-style-iw']").remove(); // text
});
it is also necessary to attach the jQuery library
I need to know the following...
I have a video embed in html using tag, the page that I'm building is using the z-index, the idea is to use layers... everything was fine until, the media embed...
I have a video on full screen 100% width and height ...
<style>
.bg_vid {
position: absolute;
z-index 10;
w: 100%
h: 100%
}
.btns {
position: relative;
}
.btn-overlay-vid {
bg: url'img/pattern.png';
position: absolute;
z-index: 30;
}
.btn-video {
z-index: 25;
}
</style>
<div class="btns">
<div class="btn-overlay-vid"></div>
<div class="btn-video">
<object width="300" height="169">
<params name [...]> </params>
<params name [...]> </params>
<params name [...]> </params>
<params name="wmode" value="transparent" > </params>
<embed [...]&embed=transparent ></embed>
</object>
</div>
</div>
<div class="bg_vid">
<iframe [...] />
</div>
So the background video for the full "screen" is working fine, but, the button video is not working... I mean the overlay div still behind the now this only happen for almost all browsers but Google Chrome .. in Google Chrome is working good...
the video is behind the overlay div which is just an image for(for now), so I wonder why in IE(not surprise there) and Firefox is not working...
Thank you.
Try giving .btn-video a position, relative or something. z-index doesn't like undeclared positions.
I had to change my Java that I was using for the tag... and by doing so, I can now use &wmode=transparent in my , Say I want to send the iFrame to the background of any other layer...
<iframe
class="behind"
type="text/html"
width="300"
height="169"
src="https://www.youtube.com/embed/7SyAejEiiLw?autoplay=1&controls=0&loop=1&modestbranding=1&rel=0&showinfo=0&color=white&wmode=transparent" frameborder="0" allowfullscreen></iframe>
Now I can dance like the guys in that video...
Note: If you want to use the "Params" like in this demo I suggest you use the YouTube API instead, it will work as standalone but is always better to use the API, more control over the YouTube Player.
So my conclusion to this is NEVER limit an HTML TAG, I was reserving the iframe tag for other purposes and by doing so I was forcing my self to use the object tag for media files, also was limiting the use of my site on other devices such as tablets or smartphones, the tag is not so friendly with those devices.
i've a code which let start a youtubevideo after clicking on a image.
The Problem is, that Opera, Chrome ect. start the video behind the image before clicking.
Firefox works fine.
Heres my code:
<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
<img style="cursor: pointer; margin-left: 89px;" src="./img/style/new/slider/XXXXXX.png" alt="" />
</div>
<div id="thevideo" style="display: none;">
<iframe width="604" height="266" src="//www.youtube.com/embed/XXXXXXXX?rel=0&autohide=2&showinfo=0&controls=0&modestbranding=0&wmode=transparent&showsearch=0&version=3&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
Can you help me for a better code?
Additional is it possible to show the Image again after the video ends?
Thanks in advance
EDIT: push
What if you paste the iframe code to #thevideo when the user clicks the image?
I think you can use the .append() function in jQuery to do it.
The chrome/opera...browser issue is a known issue. There are browser settings that you can change that will make it so that it does not auto play the video, since you are really just putting a mask over the video. See this article: Stop youtube autoplay
EDIT:
To handle it with a programmatic approach:
change your autoplay value in the youtube url to "autoplay=0". Add an id value to your iframe, such as id="iframe". Then add the following line of code to the click function of your image: document.getElementById('iframe').src = document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
This can also be seen at: Youtube Overlay Image Div - Autoplay Underneath
See above:
EDIT: To handle it with a programmatic approach: change your autoplay value in the youtube url to "autoplay=0". Add an id value to your iframe, such as id="iframe". Then add the following line of code to the click function of your image: document.getElementById('iframe').src = document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
This can also be seen at: Youtube Overlay Image Div - Autoplay Underneath
I used it and it works great!
I found answers about how to do this WITH php (example: load HTML\PHP pages into another Page's div).
However, I need to be able to do this in a CKEditor and I don't have the ability to include PHP code (or javascript or any other code).
Here's the existing iframe I wish to replace with divs (if possible):
<iframe src="http://www.example.com/page1/2/3.html" frameborder="0" height="400" scrolling="no" width="100%"></iframe>
I appreciate any ideas... Thanks
Why dont you try AJAX to load the content?
//Its a javascript code:
<script type="text/javascript">
$('#15').click(function()
{
$(".box").load('content8.html');
});
$('#16').click(function()
{
$(".box").load('edit.html');
});
</script>
// For Displaying the content, create a seperate DIV:
<div class="box effect8" >
"The Ajax content loaded inside this div"
</div>
Unfortunately, what you are trying to do is simply not possible. However. what you can do is apply styles to your iframe to make it work more like a div. An iframe is inline, and a div is block. You can make your iframe block so that it behaves like a div.
Without CSS:
<iframe style="display:block" src="http://www.example.com/page1/2/3.html" frameborder="0" height="400" scrolling="no" width="100%"></iframe>
With CSS:
iframe
{
display: block;
}
How would I remove the border from an iframe embedded in my web app? An example of the iframe is:
<iframe src="myURL" width="300" height="300">Browser not compatible.</iframe>
I would like the transition from the content on my page to the contents of the iframe to be seamless, assuming the background colors are consistent. The target browser is IE6 only and unfortunately solutions for others will not help.
Add the frameBorder attribute (note the capital ‘B’).
So it would look like:
<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>
After going mad trying to remove the border in IE7, I found that the frameBorder attribute is case sensitive.
You have to set the frameBorder attribute with a capital B.
<iframe frameBorder="0"></iframe>
As per iframe documentation, frameBorder is deprecated and using the "border" CSS attribute is preferred:
<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
Note CSS border property does not achieve the desired results in IE6, 7 or 8.
In addition to adding the frameBorder attribute you might want to consider setting the scrolling attribute to "no" to prevent scrollbars from appearing.
<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
For browser specific issues also add frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" according to Dreamweaver:
<iframe src="test.html" name="banner" width="300" marginwidth="0" height="300" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0">Browser not compatible. </iframe>
You can use style="border:0;" in your iframe code. That is the recommended way to remove border in HTML5.
Check out my html5 iframe generator tool to customize your iframe without editing code.
Use the HTML iframe frameborder Attribute
http://www.w3schools.com/tags/att_iframe_frameborder.asp
Note: use frameBorder (cap B) for IE, otherwise will not work. But, the iframe frameborder attribute is not supported in HTML5. So, Use CSS instead.
<iframe src="http://example.org" width="200" height="200" style="border:0">
you can also remove scrolling using scrolling attribute
http://www.w3schools.com/tags/att_iframe_scrolling.asp
<iframe src="http://example.org" width="200" height="200" scrolling="no" style="border:0">
Also you can use seamless attribute which is new in HTML5. The seamless attribute of the iframe tag is only supported in Opera, Chrome and Safari. When present, it specifies that the iframe should look like it is a part of the containing document (no borders or scrollbars). As of now, The seamless attribute of the tag is only supported in Opera, Chrome and Safari. But in near future it will be the standard solution and will be compatible with all browsers. http://www.w3schools.com/tags/att_iframe_seamless.asp
Style property can be used
For HTML5 if you want to remove the boder of your frame or anything you can use the style property. as given below
Code goes here
<iframe src="demo.htm" style="border:none;"></iframe>
I tried all of the above and if that doesn't work for you try the below CSS resolved the issue for me. Which just tells the browsers to not add any padding or margin.
* {
padding:0px;
margin:0px;
}
You can also do it with JavaScript this way. It will find any iframe elements and remove their borders in IE and other browsers (though you can just set a style of "border : none;" in non-IE browsers instead of using JavaScript). AND it will work even if used AFTER the iframe is generated and in place in the document (e.g. iframes that are added in plain HTML and not JavaScript)!
This appears to work because IE creates the border, not on the iframe element as you'd expect, but on the CONTENT of the iframe--after the iframe is created in the BOM. ($#&*##!!! IE!!!)
Note: The IE part will only work (of course) if the parent window and iframe are from the SAME origin (same domain, port, protocol etc.). Otherwise the script will get "access denied" errors in the IE error console. If that happens, your only option is to set it before it is generated, as others have noted, or use the non-standard frameBorder="0" attribute. (or just let IE look fugly--my current favorite option ;) )
Took me MANY hours of working to the point of despair to figure this out...
Enjoy. :)
// =========================================================================
// Remove borders on iFrames
var iFrameElements = window.document.getElementsByTagName("iframe");
for (var i = 0; i < iFrameElements.length; i++)
{
iFrameElements[i].frameBorder="0"; // For other browsers.
iFrameElements[i].setAttribute("frameBorder", "0"); // For other browsers (just a backup for the above).
iFrameElements[i].contentWindow.document.body.style.border="none"; // For IE.
}
Add the frameBorder attribute (Capital ‘B’).
<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. </iframe>
In your stylesheet add
{
padding:0px;
margin:0px;
border: 0px
}
This is also a viable option.
Either add the frameBorder attribute, or use style with border-width 0px;, or set border style equal to none.
use any one from below 3:
<iframe src="myURL" width="300" height="300" style="border-width:0px;">Browser not compatible.</iframe>
<iframe src="myURL" width="300" height="300" frameborder="0">Browser not compatible.</iframe>
<iframe src="myURL" width="300" height="300" style="border:none;">Browser not compatible.</iframe>
If the doctype of the page you are placing the iframe on is HTML5 then you can use the seamless attribute like so:
<iframe src="..." seamless="seamless"></iframe>
Mozilla docs on the seamless attribute
If you are using the iFrame to fit the width and height of the entire screen, which I am assuming you are not based on the 300x300 size, you must also set the body margins to "0" like this:
<body style="margin:0px;">
<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>
This code should work in both HTML 4 and 5.
also set border="0px "
<iframe src="yoururl" width="100%" height="100%" frameBorder="0"></iframe>
Try
<iframe src="url" style="border:none;"></iframe>
This will remove the border of your frame.
Use this
style="border:none;
Example:
<iframe src="your.html" style="border:none;"></iframe>
To remove border you can use CSS border property to none.
<iframe src="myURL" width="300" height="300" style="border: none">Browser not compatible.</iframe>
1.Via Inline Style set border:0
<iframe src="display_file.html" style="height: 400px; width:
100%;border: 0;">HTML iFrame is not compatible with your browser
</iframe>
2. Via Tag Attribute frameBorder Set 0
<iframe src="display_file.html" width="300" height="300" frameborder="0">Browser not compatible.</iframe>
3. if We have multiple I Frame We can give class and Put css in internal or externally.
HTML:
<iframe src="display_file.html" class="no_border_iframe">
HTML iFrame is not compatible with your browser
</iframe>
CSS:
<style>
.no_border_iframe{
border: 0; /* or border:none; */
}
</style>
Its simple just add attribute in iframe tag frameborder = 0
<iframe src="" width="200" height="200" frameborder="0"></iframe>
for me, adding worked perfectly
.iframe{
box-shadow: none !important;
}
this solution is particularly for a shopify theme I am editing. The shopify theme uses iframes in different ways throughout the whole theme and one of them glitched. I had to go into the css manually and overide the css attribute.
I had an issue with bottom white border and i could not fix it with border, margin & padding rules ... So add display:block; because iframe is an inline element.
This takes whitespace in your HTML into account.
iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"
Works with Firefox ;)
<iframe src="URL" frameborder="0" width="100%" height="200">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe frameborder="1|0">
(OR)
<iframe src="URL" width="100%" height="300" style="border: none">Your browser
does not support iframes.</iframe>
The <iframe> frameborder attribute is not supported in HTML5. Use CSS
instead.