I would like to add OSM to my website (in Ruby on Rails), so I've exported following html code from their site:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=-109.3359375%2C56.84897198026975%2C25.3125%2C84.38877975103257&layer=mapnik&marker=76.23088818107027%2C-42.076958649999995" style="border: 1px solid black"></iframe><br/>
<small>see more</small>
and I've put it into
<!DOCTYPE html>
<html>
<body>
//here
</body>
</html>
The problem is, that there is only empty rectangle, without map, but when I click "see more" I'm redirected to OSM site with big map.
What can cause, that I can't see map on my site?
Edit:
I've just seen, that it only doesn't work only in desktop browser, when I use my mobile phone is ok.
I just switched to HTTPS on my website. I had been displaying a locally hosted PDF via an iframe; the iframe displays a small html file with the PDF embedded (as an object) in it. However, the PDF is no longer displaying. I can navigate to the PDF & it displays just fine but does not display when I load the html page. What can I do to make the PDF display?
iframe
<iframe src="/updates/update.htm" width="100%" height="800px"
marginheight="0" frameborder="0"></iframe>
update.htm
<html>
<header>
<link rel="stylesheet" href="custom-styles.css">
</style>
</header>
<body>
<object src="update.pdf"
type="application/pdf" width="100%" height="800px"><div id="show-text">
<p>It appears your web browser is not configured to display PDF files.</p>
<p><a href='update.pdf'>Click here to download the PDF file.</a></p>
</div>
</object>
</body>
</html>
custom-styles.css
#show-text {
display: block;
width: 100%;
height: 15%;
background: #D1D1D1;
}
Shot in the dark here, but are you sure that "/updates/update.htm" is the right path? If your page is www.site.com/something/index.php and you use that path, the browser will look for www.site.com/something/updates/update.htm. Perhaps you want www.site.com/updates/update.htm. Maybe you need a relative path like "../updates/update.htm"
UPDATE
Try <object data="update.pdf">. The <embed> tag uses scr=; <object> uses data= according to w3schools.
I'm trying to put g2a.com website in an iframe, but it doesn't work. When I insert code below to my html file g2a website, it is opening full screen, and I have g2a.com in address bar. It is working with any other website I have tried so it has to be something specific about g2a.com. Anyone have an idea how to make it work with iframe?
<iframe src="https://www.g2a.com/" width="50%" height="50%" frameborder="0" marginheight="0" marginwidth="0">
<p>Click here! (Your browser does not support iframes)</p>
</iframe>
g2a.com uses a framebraker, to avoid using this site in an iframe..
you can still add a
sandbox="allow-scripts"
in your example:
<iframe src="https://www.g2a.com/" sandbox="allow-scripts" width="50%" height="50%" frameborder="0" marginheight="0" marginwidth="0">
<p>Click here! (Your browser does not support iframes)</p>
</iframe>
to your iframe, which works in most newer browsers. This prohibits that the website in the frame can affect the main window.
I have a form that is iframed into a web page. Upon completion of the form, a YouTube video is displayed from using iframe embed.
When I enter full screen mode of the YouTube video, nothing really happens.
Is the fullscreen of the nested iframe constrained by the dimensions of the parent iframe?
In the current YouTube iframe (2021), you have to add fullscreen to the allow attribute:
<iframe allow="fullscreen;">
If I understand correctly you have an iframe that contains a second iframe (the youtube one).
Try adding the allowfullscreen attribute to the "parent" iframe.
For full browser support it should look like this:
<iframe src="your_page_url"
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"> </iframe>
React.JS People, remember allowFullScreen and frameBorder="0"
Without camel-case, react strips these tags out!
Adding allowfullscreen="allowfullscreen" and altering the type of YouTube embed fixed my issue.
In HTML5, simply use:
<iframe src="https://www.youtube.com/embed/ID" allowfullscreen />
This attribute can be set to true if the frame is allowed to be placed into full-screen mode by calling it's Element.requestFullscreen() method. If this isn't set, the element can't be placed into full-screen mode. See Mozilla Docs
In React.js framework use property allowFullScreen.
Note that there are more answers pointing to different directions, so hope this post will unite and simplify all mentioned with latest valid approach.
I had to add allowFullScreen attribute to the "parent" iframe. The case of the attribute does matter. I don't think Firefox or Edge/IE11 has a browser specific allowFullScreen attribute. So it looks something like this:
<iframe allowFullScreen='allowFullScreen' src='http://api.youtube.com/...'/>
Putting allowfullscreen inside iframe tag without setting it to true is already deprecated. The updated answer for this issue which is fullscreen is not available with embedded YouTube videos is to set allowfullscreen to true inside tag:
<iframe
id="player"
src="URL here"
allowfullscreen="true">
</iframe>
Tested and working for all browsers without issues.
The best solution and the easiest one to achieve this by using this simple code:
<iframe id="player" src="URL" allowfullscreen></iframe>
Tested and working for all browsers without issues.
Thank you
jut add allowfullscreen="true" to iframe
<iframe src="URL here" allowfullscreen="true"> </iframe>
we can get the code below the video. In the share option, we will have an option embed. If we click on the embed we will get the code snippet for that video.
which will be similar to the below code
<iframe width="560" height="315" src="https://www.youtube.com/embed/GZh_Kj1rS74" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
The above code will help you to get the full-screen option.
I found a solution that worked for me on this page thanks to someone named #orangecoat-ciallella
https://www.drupal.org/node/1807158
The "full screen" button was not working in my Chrome browser on Ubuntu.
I was using the media_youtube module for D6. In the iframe it was using a video URL of the pattern //www.youtube.com/v/videoidhere.
I used the theme preprocessing function to make it output > //www.youtube.com/embed/videoidhere
and it immediately started allowing the fullscreen button to work.
In short, try changing the /v/ to /embed/ in the YouTube URL if you're having a problem.
If adding allowfullscreen does not help, make sure you don't have &fs=0 in your iframe url.
You need to add these two attributes allow="fullscreen;" allowfullscreen to your iframe tag like this:
<iframe ... allow="fullscreen;" allowfullscreen >
</iframe>
Note: for my case, adding just allowfullscreen was not enough to enable fullscreen mode on website.
In my personal blog the youtube videos are embedded with
<div className="flex justify-center">
<iframe width="600" height="350" src="https://www.youtube.com/embed/MoQa_zdmoKs?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;fullscreen"></iframe>
</div>
easiest way to achieve this in 2021 is:
Go to your desired youtube video, click share and pick embed. Copy and paste the code to your html and you are good to go!
Tested this below code on Edge & Chrome. Expands to full browser view, but not full-screen. I had to stick to this workaround as none of the above solutions worked for my case.
This also immediately auto-plays the video muted though.
<html>
<head>
<body>
<iframe src="https://www.youtube.com/embed/742lIJQVlSg?mute=1&autoplay=1" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto" allowfullscreen></iframe>
</body>
</head>
</html>
Inserting after the outer-most iframe from inside the nested iframe fixed the issue for me.
var outerFrame = parent.parent.parent.$('.mostOuterFrame');
parent.$('<iframe />', {
src: 'https://www.youtube.com/embed/BPlsqo2bk2M'
}).attr({'allowfullscreen':'allowfullscreen', 'frameborder':'0'
}).addClass('youtubeIframe')
.css({
'width':'675px',
'height':'390px',
'top':'100px',
'left':'280px',
'z-index':'100000',
'position':'absolute'
}).insertAfter(outerFrame);
I managed to find a relatively clean straightforward way to do this. To see it working click on my webpage: http://developersfound.com/yde-portfolio.html and hover over the 'Youtube Demos' link.
Below are two snippets to show how this can be done quite easily:
I achieved this with an iFrame. Assuming this DOM is 'yde-home.html' Which is the source of your iFrame.
<!DOCTYPE html>
<html>
<head>
<title>iFrame Container</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<style type="text/css">.OBJ-1 { border:none; }</style>
<script>
$(document).ready(function() {
$('#myHiddenButton').trigger('click');
});
</script>
</head>
<body>
<section style="visibility: hidden;">
<button id="myHiddenButton" onclick="$(location).attr('href', '"http://www.youtube.com/embed/wtwOZMXCe-c?version=3&start=0&rel=0&fs=1&wmode=transparent;");">View Full Screen</button>
</section>
<section class="main-area-inner" style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:1080px;height:720px;">
<iframe src="http://www.youtube.com/embed/wtwOZMXCe-c?version=3&start=0&rel=0&fs=1&wmode=transparent;"
class="OBJ-1" style="position:absolute;left:79px;top:145px;width:1080px;height:720px;">
</iframe>
</section>
</body>
</html>
Assume this is the DOM that loads the iFrame.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Full Screen Youtube</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {});
</script>
</head>
<body>
<iframe name="iframe-container" id="iframe-container" src="yde-home.html" style="width: 100%; height: 100%;">
<p>Your browser does not support iFrames</p>
</iframe>
</body>
</html>
I've also checked this against the W3c Validator and it validates a HTML5 with no errors.
It is also important to note that: Youtube embed URLs sometimes check to see if the request is coming from a server so it may be necessary to set up your test environment to listen on your external IP. So you may need to set up port forwarding on your router for this solution to work. Once you've set up port forwarding just test from the external IP instead of LocalHost. Remember that some routers need port forwarding from LocalHost/loopback but most use the same IP that you used to log into the router. For example if your router login page is 192.168.0.1, then the port forward would have to use 192.168.0.? where ? could be any unused number (you may need to experiment). From this address you would add the ports that your test environment listen from (normally 80, 81, 8080 or 8088).
Noticed mine worked on chrome. Got it to work in Firefox by going to <about:config> and setting full-screen-api.allow-trusted-requests-only to false.
After full screen worked once, I could set that back to true, and full screen still worked which was quite perplexing.
What I did: I embedded Facebook Like Box on my otherwise "XHTML 1.0 Transitional" webpage. The source code of Facebook Like Box is as given by Facebook:
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=true&stream=false&header=true&height=62"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:292px; height:62px;"
allowTransparency="true">
</iframe>
What W3C validator says: When I check the webpage in W3C validator, it gives following error:
Line 600, Column 421: there is no attribute "allowTransparency"
But, IE needs allowTransparency="true"> to work.
Expected Solution: What should I do to make it validate as XHTML 1.0 Transitional while keeping Facebook like box on my webpage.
You can write two codes for it. One with allowTransparency with if statement for IE and another without it. This way, it can be done. So, use this embed code with conditional HTML comments:
<!--[if IE]>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=true&stream=false&header=true&height=62"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:292px; height:62px;"
allowTransparency="true">
</iframe>
<![endif]-->
<!--[if !IE]>-->
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=true&stream=false&header=true&height=62"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:292px; height:62px;">
</iframe>
<!--<![endif]-->
This will validate the XHTML since the iframe code is commented out and you can use allowTransparency too.
EDIT: Closed the iframe as pointed out by staticbeast in a comment.
If IE truly needs allowTransparency="true" to work, then you're not going to be able to create 100% valid XHTML 1.0 Transitional markup.
...but why does IE need that attribute? What happens when it's omitted?
If you're really that concerned about W3C validation (I don't think it's worth it, but that's just me), then you could apply the same iframe attribute using JavaScript. I'm not recommending this,* but you could do it:
document.getElementById('theIFrameID').allowTransparency = true;
*because I don't think that the goal of creating 100% validated markup justifies using JavaScript to accomplish something that's otherwise-identical to the static markup.
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_es=true&stream=false&header=true&height=62"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:292px; height:62px; allowTransparency:true;">
</iframe>
I don't know why they used styles to do everything except allow transparency.So just throw it in with the rest of the styles and it should validate.
I've not tested it recently, but I think you're allowed to have comments within HTML tags, so just wrap the allowTransparency in an IE conditional comment:
<!--[if ie]> allowTransparency="true" <![end if]-->
To have IE see it, and everything else ignore it. This should also be valid XHTML, since comments are ignored by browsers, and conditional comments parses only by IE.
For me is the best way use a jQuery like this:
For facebook like button. I set class="likebtn" and then in .js file:
$(document).ready(function () {
$(".likebtn").attr('allowTransparency', 'true');
});
Thats all ;-)
Leave it as is. "allowTransparency" only means something to IE, and it will be ignored otherwise. Validation is a tool for checking your document against the standard, not an end in itself. You are knowingly writing something outside of the HTML standard for a particular case; acknowledge that rather than trying to hide it.