The target site will not fully load inside the iframe element I've assigned it to:
<iframe
id="modalMapView"
class="hidden"
src="https://syringemap.firebaseapp.com/"
title="Syringe Map live application"
scrolling="no"
sandbox="allow-scripts allow-popups allow-same-origin"
></iframe>
If you visit the firebase app, you can see that it takes a bit of time, but eventually will load an additional menu and map. Are there any particular attributes I could add to the iframe that will help it move forward in the loading process?
EDIT: Photo for reference - this is what the iframe renders in my viewport: iframe render, and this is what it needs to render: firebase application
You need to use the allow property on the iframe:
<iframe
id="modalMapView"
class="hidden"
src="https://syringemap.firebaseapp.com/"
title="Syringe Map live application"
scrolling="no"
allow="geolocation"
sandbox="allow-scripts allow-popups allow-same-origin"
></iframe>
Related
This question already has answers here:
Embedding youtube video "Refused to display document because display forbidden by X-Frame-Options"
(10 answers)
Closed 5 years ago.
I am trying to feed my Django page with some resource I am getting from somewhere else.
Inside the feed, I have YouTube videos with URL like: https://www.youtube.com/watch?v=A6XUVjK9W4o
Once I added this into my page, the video does not show up, saying:
Refused to display 'https://www.youtube.com/watch?v=A6XUVjK9W4o' in a
frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Then I said, well, what if I change watch to embed. Then YouTube player shows up, but no video, saying:
How can I get this to work?
I am showing it in HTML like this:
<iframe width="420" height="315"
src="{{vid.yt_url}}">
</iframe>
I googled almost for an hour, but no sign of success. I tried to append &output=embed - nada...
You must ensure the URL contains embed rather watch as the /embed endpoint allows outside requests, whereas the /watch endpoint does not.
<iframe width="420" height="315" src="https://www.youtube.com/embed/A6XUVjK9W4o" frameborder="0" allowfullscreen></iframe>
The YouTube URL in src must have and use the embed endpoint instead of watch, so for instance let’s say you want to embed this YouTube video: https://www.youtube.com/watch?v=P6N9782MzFQ (browser's URL).
You should use the embed endpoint, so the URL now should be something like https://www.youtube.com/embed/P6N9782MzFQ. Use this value as the URL in the src attribute inside the iframe tag in your HTML code, for example:
<iframe width="853" height="480" src="https://www.youtube.com/embed/P6N9782MzFQ" frameborder="0" allowfullscreen ng-show="showvideo"></iframe>
So just replace https://www.youtube.com/watch?v= with https://www.youtube.com/embed/ and of course check for your video's ID. In this sample, my video ID is P6N9782MzFQ.
You only need to copy <iframe> from the YouTube Embed section (click on SHARE below the video and then EMBED and copy the entire iframe).
If embed no longer works for you, try with /v instead:
<iframe width="420" height="315" src="https://www.youtube.com/v/A6XUVjK9W4o" frameborder="0" allowfullscreen></iframe>
Along with the embed, I also had to install the Google Cast extension in my browser.
<iframe width="1280" height="720" src="https://www.youtube.com/embed/4u856utdR94" frameborder="0" allowfullscreen></iframe>
I am trying to insert a iframe on my website, http://freefreemarkets.com, that allows me to insert the website showing what I am selling on eBay.
I have never created an iframe before.
<iframe src="http://www.website.com"></iframe>
And you can edit how you want by adding stuff like:
width="400" height="215" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" etc..
You need to use an iframe, by specifying the src attribute:
<iframe src="http://www.example.com"></iframe>
Some websites doesn't support to be embedded in iframe, be careful.
I have made a page full of embed videos from youtube and vimeo. And the load time is horrific! It makes my laptop completely freeze until they have all been properly loaded.
I have seen in another article that the way to do it is to keep the object or video tag out of the HTML and then add it after page has loaded. I have since been trying to work out how to do this but no luck!
I have also seen on other websites that they have a loading gif behind the tag until the video is fully.
Any advice on how to do either of these or another method would be great!
some embed video code:
<iframe src="http://player.vimeo.com/video/57564747" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
I would suggest to load them only on demand.
Put a dummy picture where a video will be. If the picture is clicked, load the content via jQuery or JS.
<div id='video-anchor'>
<img id='dummy' src='http://b.vimeocdn.com/ts/403/127/403127670_960.jpg' alt='' />
</div>
$('#dummy').click(function() {
$('#video-anchor').html(
'<iframe src="http://player.vimeo.com/video/57564747"
width="500"
height="281"
frameborder="0"
webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
');
});
You can get the images that vimeo uses. They are set as background-image for the div.vimeo_holder.
An alternative approach is to make your page full of thumbnail image screenshots of your various videos. And when someone clicks on a specific screenshot image, activate a pop-up window that displays that specific video. This puts less stress on your load time, and you can do this for a lot of videos within a given page.
I have client.jsp page i put following iframe inside it
<IFRAME SRC="<%=filterPath%>" width="100%" height="1811px" id="iframe1" marginheight="0" frameborder="0" ></iframe>
In client.jsp i have link to call other page and from that page i again redirect on client.jsp using following code
redirect
When i look viewsource for the same i found two iframe and code is like
<iframe>
<iframe>
<iframe>
</iframe>
Each time i called client.jsp from other page it creates new iframe
How i rid from this problem ?
You need to load the page in the main window, instead of IFRAME, when redirect is clicked.
You can achieve this by using the following code :
<a target="_parent" href="client.jsp">redirect</a>
If your link is inside of iframe and you load into iframe new client.jsp with other iframe - you will get this. This is ok. Just put at head of iframe this:
<base target="_parent" />
or specify for every link target="_parent":
your link
i've been working on a toolbar at the top of my sample website:
http://theplagueround.com/dev/
but it gets hidden behind any youtube video content. i've seen a post or two about adding parameters to the tag, but youtube is also using iframes now so that doesn't apply.
You may want to try my plugin for Youtube (4000+ downloads so far): Youtube shortcode
No design issues have been reported.
To have a Youtube video appear behind your toolbar, you should add the parameter wmode=transparent to the end of the URL.
So change this:
<iframe width="425" height="349"
src="http://www.youtube.com/embed/H1Opn4DS88k"
frameborder="0" allowfullscreen></iframe>
to this:
<iframe width="425" height="349"
src="http://www.youtube.com/embed/H1Opn4DS88k?wmode=transparent"
frameborder="0" allowfullscreen></iframe>
More here:
http://www.brandondawson.org/web-design/new-youtube-iframe-embed-code-wmodetransparent
If you don't want to hardcode the HTML into your posts, you should use a plugin like the one provided by #Tubal Martin. This has the advantage that if Youtube update their embed code in the future, you should only need to upgrade the plugin to the latest version.