I made an app in Facebook that has some simple html including an iframe containing a vimeo video. This app has worked fine for the last year or so, but all of the sudden the video doesn't show up. I've double checked the code of the page (made a stand-alone html page of it and it worked fine)
Does anybody know if Facebook has changed their policy on iframes or embedded video? If so any suggestions?
Here is a link to the app (on Facebook): https://www.facebook.com/LastFrontierHeli/app_367384316627957
And here is the code for the app:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome</title>
<style type="text/css">
<!--
.container {
height: 810px;
width: 841px;
}
-->
</style>
</head>
<body>
<div class="container">
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_header.jpg" alt="header" />
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_vid_left.jpg" alt="vid left" />
<iframe src="http://player.vimeo.com/video/30746400?byline=0&portrait=0" width="658" height="370" frameborder="0"></iframe>
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_vid_right.jpg" alt="vid right" />
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_content.jpg" alt="content" /><a href="http://www.lastfrontierheli.com" target="_blank">
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_button_website.jpg" alt="website button" border="0" /></a>
<a href="http://www.facebook.com/LastFrontierHeli" target="_parent">
<img src="http://www.lastfrontierheli.com/images/facebook/facebook_welcome_button_facebook.jpg" alt="facebook button" border="0" /></a>
</div>
</body>
Any help would be greatly appreciated!
To find out what's wrong Iv'e just used Chrome Developer tools,
and under Console you could see this line:
[blocked] The page at https://367384316627957.iframehost.com/966373?signed_request=incxTmuyY3_vzi…NlciI6eyJjb3VudHJ5IjoiaWwiLCJsb2NhbGUiOiJlbl9VUyIsImFnZSI6eyJtaW4iOjIxfX19 ran insecure content from http://player.vimeo.com/video/30746400?byline=0&portrait=0.
So incase you didn't know - facebook requires all data to be encrypted (served via SSL).
just change your iframe from http://player.vimeo.. to http*s*://player.vimeo
and it should work fine.
Related
I want to load another page using HTML iframe but Firefox blocks it due to avoid security problems.
.
I've tried to chnage the "https" to "http" but it doesn't work.
The error shown by Firefox:
Firefox Can’t Open This Page
To protect your security, anouar.stencila.io will not allow Firefox to display the page if another site has embedded it. To see this page, you need to open it in a new window.
This is the code used:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Reproducible Article</title>
</head>
<body>
<!-- The header of the file -->
<p>
<a
href="https://ojs3.josekarvalho.net/index.php/rp/article/view/87/176"
target="_blank"
>Link to HTML version</a
>
|
<a
href="https://ojs3.josekarvalho.net/index.php/rp/article/view/87/181"
target="_blank"
>Link to PDF version</a
>
</p>
<!-- The iframe to be shown - the link to the reproducible article allowfullscreen -->
<iframe
src="https://anouar.stencila.io/gentsch2020/"
frameborder="0"
style="position: absolute; top: 80px; left: 0; width: 100%; height: 100%"
scrolling="yes"
title="Reproducible Article"
></iframe>
</body>
</html>
The page https://anouar.stencila.io/gentsch2020/ is served with the following X-Frame-Options header:
x-frame-options: allow-from *.ojs3.josekarvalho.net
ALLOW-FROM isn't supported by any up to date browser, so it won't work. You either need to use SAMEORIGIN when possible or remove the header completely.
X-Frame-Options can be replaced with Content-Security-Policy: frame-ancestors <source>;, see MDN.
I am trying to embedd a webpage from a cisco satellite device into a div tag of my webpage but I am getting the following problem
The page loads properly with the logon screen but as soon as I enter the login details it does not login byut instead stays on the login screen. I have tried both div and Iframe and both give me the same results. However when i access the device directly on IE or Chrome it works fine. The problem is only within my iframe or div.
My samle code is below however since you dont have access to the device you may not be able to see it working.. A shot in the dark here just asking you all to please give me some stuff to try out
<!<doctype html>
<html lang="en">
<body>
<div style="margin: 0 auto; width: 100%; height: 100%;">
<object type="text/html" data="http://192.168.10.107/"
style="width: 100%; height: 100%; margin: 1%;"> </object>
</div>
</body>
</html>
I also tried this with iframes as under but that also failed to work
<html>
<iframe src="http://192.168.10.107" sandbox ="allow-same-origin allow-scripts allow-popups allow-forms" width=100% height =100%></iframe>
</html>
Here I have a page that is like the one you want I guess.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MyTitle</title>
</head>
<frameset rows="0,*" border="0">
<frame name="header" scrolling="no" noresize target="main">
<frame name="main" src="http://192.168.10.107/">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
I have no idea how to add an image in Google Search.
I just want to add the image of the page in Google Search.
<body>
<div>
<img height="180" src="http://2.bp.blogspot.com/-ARWw3b8l8RI/VQ_gW2mIHtI/AAAAAAAABQc/tuzJvua7o5Q/s1600/Bisan%2BAsa%2BKo.jpg" width="320" />
</div
</body>
You must use the following code:
Method 1
<meta itemprop="image primaryImageOfPage" content="e.g./pic.jpg" />
Method 2
<body>
<div itemscope itemtype="https://schema.org/WebPage">
<img src="e.g./pic.jpg" itemprop="primaryImageOfPage" />
</div>
</body>
Also referer to:
https://schema.org/docs/gs.html
https://schema.org/primaryImageOfPage
So.
First I used this <img onmouseover="preview.src=img1.src" id="img1" src="pic01.jpg" alt="Image Not Loaded"/> but it didn't work. I changed 'id' to 'name' and it worked. But name attribute is obsolete and not recommended to use. So what should I use? I'm trying to make a image gallery for my school project. And because it's a school project it must be "perfect" html. No any errors.
And btw. 'id' worked in Internet Explorer and Mozilla Firefox. But not in Google Chrome.
My whole code is this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="image001.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" name="img2" src="image002.jpg" alt="Image Not Loaded"/>
</div>
<br>
<div class="preview" style="text-align: center;">
<img name="preview" src="image001.jpg" alt="No Image Loaded"/>
</div>
</body>
</html>
And this works in Google Chrome when I change id to name.
Likely the variables preview and/or img1 are undefined. I assume you're trying:
<img onmouseover="document.getElementById('preview').src=document.getElementById('img1').src" id="img1" src="pic01.jpg" alt="Image Not Loaded"/>
I am trying to create a very basic windows desktop gadget to display my Stack Overflow Flair.
I do not have much experience with html or web development. I have tried to follow the instructions here, but when I install the gadget it is tiny:
Yes, it's that tiny white square.
I have tried setting a background image but it doesn't seem to work either (I don't actually need a background image, I was just trying to get it to work). If I run the html source file stand alone then it displays correctly in a browser:
Here is the code from the html source file (named MySOFlair.html):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="gadgetContent">
<a href="http://stackoverflow.com/users/2012446/chrisprosser">
<img src="http://stackoverflow.com/users/flair/2012446.png" width="208" height="58"
alt="profile for ChrisProsser at Stack Overflow, Q&A for professional and enthusiast programmers"
title="profile for ChrisProsser at Stack Overflow, Q&A for professional and enthusiast programmers"/>
</a>
</div>
</body>
</html>
Here is the code from the manifest file (Gadget.xml):
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>MySOFlair</name>
<version>1.0.0.0</version>
<author name="Chris Prosser" />
<description>Mt Stack Overflow Flair Gadget</description>
<!--<icons>
<icon src="http://stackoverflow.com/users/flair/2012446.png"
width="208"
height="58" />
</icons>-->
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="MySOFlair.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
<!--<defaultImage src="http://stackoverflow.com/users/flair/2012446.png"
width="208"
height="58"/>-->
</host>
</hosts>
</gadget>
I have tried uncommenting the image links in here, but it doesn't change anything.
Any ideas on how to set the size correctly would be greatly appreciated.
I have found how to fix this. I found a style element that could be inserted into the HTML header section. Here is the new HTML file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body
{
margin: 0;
width: 212;
height: 62;
}
#gadgetContent
{
margin: 0px;
width: 208px;
height: 58px;
}
</style>
</head>
<body>
<div id="gadgetContent">
<a href="http://stackoverflow.com/users/2012446/chrisprosser">
<img src="http://stackoverflow.com/users/flair/2012446.png" width="208" height="58"
alt="profile for ChrisProsser at Stack Overflow, Q&A for professional and enthusiast programmers"
title="profile for ChrisProsser at Stack Overflow, Q&A for professional and enthusiast programmers"/>
</a>
</div>
</body>
</html>