I have the Vimeo player embedded in my web application.
<iframe src="https://player.vimeo.com/video/1234" width="560" height="350" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
When I open the application from the production environment, the video will not load. Firefox states that vimeo.com is not safe and that my website requires HTTP Strict Transport Security (HSTS).
Does Vimeo support HSTS or is this planned? I haven't been able to find anything so far.
check this, maybe will help you:
https://vimeo.com/forums/help/topic:112861
https://vimeo.com/forums/topic:109838
Related
I have a problem playing HLS (m3u8).
I have a System with some Live streams. To play these streams I wrote a Webpage using Videojs.
This runs smoothly on Desktop with Chrome, Firefox and even Edge.
But with Mobile the Firefox wont play it anymore.
The Firefox Browser gets the playlist, shows the first frame and gets stuck. It then shows the following error:
A network error caused the media download to fail partway.
the code Iam using looks like this
<div>
<video
id="my-video"
class="video-js vjs-big-play-centered"
controls
<?php if(isset($_GET["autoplay"])) echo "autoplay"; ?>
preload="auto"
width="1920"
height="1080"
poster="pic/Video_Hintergrund.png"
data-setup='{"fluid": true}'
onplay="onVideoStartPlaying();"
onpause="onVideoStopPlaying();"
>
<source src="[...]/index.m3u8" type="application/x-mpegURL" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
</div>
The Webpage and the Stream are located on the same Server.
Does anyone have some tips what I can try?
Sample Javascript code to replace iFrame embedded web application with AJAX (NO jQuery please)
Hi, I have a simple 'parent' html page with a 'child' iframe that loads another external web application from a different domain.
Here is the parent html page: https://shared-testing.s3-us-west-1.amazonaws.com/Example-iFrame-Web-App.html
The Problem: This simple page works fine on desktop browsers like chrome/Safari. But When I open the same link on my iphone safari/chrome, the web-app shows login screen. So basically what worked in desktop browser is not working in mobile Safari/Chrome.
(I don't understand iframes more than the simple syntax, but it seems there is some issue with how 3rd party cookies are handled in the mobile browsers... but how come it works on desktop browser and not on mobile browsers???... I am pretty confused about this point and I may be wrong about this thesis.)
From what I learned so far, iframes are less desirable (as per some experts, and I am not), I am inclining towards replacing the iFrame with a simple that our AJAX code will replace with the external web-app and show the application as before in my parent html page.
I am sure this is not the first time this has come up but after searching a lot, I was not able to find some example code that will help me do this without jQuery. I want to use plain Javascript for this and avoid jQuery.
So if you can help with either one of the following, I'd greatly appreciate it:
Why is the current html parent behaving differently in desktop
browsers versus the mobile browsers? Any ideas to make it work
consistently in all size browsers?
Sample code to replace the iframe with pure javascript AJAX approach to load the web-application.
Thanks a lot.
Copying the simple html parent file below:
<html>
<head>
<title>Sample Web-App Embedded in iFrame </title>
<style>
.example-container{
background-color:#bffdf6;
width: 100%;
padding: 30px;
}
.example-iframe{
margin: 0 auto;
display: block;
}
</style>
</head>
<body >
<div class="example-container">
<h3> This a test web page for embedding an interactive flowchart using iframe.</h3>
<iframe class="example-iframe" height="600px" width="550px" src="https://www.decizone.com/47/qZPlK2ezwIK8x3bO/How-to-Measure-Shipment-Delivery-Success-KPI/Ship-Delvry-KPI/id/5AKwBABWqJgLs1IUfqrEh1ARDstiBMcy ">
<p>Your browser does not support iframes.</p>
</iframe>
<p> <strong>NOTE:</strong>: Try opening this page on desktop as well as mobile browsers to test.</p>
</div>
</body>
</html>
I just signed up for a cloudflare account and began forcing everything to https just to see how it worked, and to my surprise, all my images refused to work over https. now this is something I don't understand because the assets are all linked via:
HTML:
<img src="./images/image.jpg" />
CSS:
background-image: url(../images/image.jpg);
So I figured, I would change it up to use absolute urls with // instead of relative paths:
HTML:
<img src="//example.com/images/image.jpg" />
CSS:
background-image: url(//example.com/images/image.jpg);
this did not work either. so I decided to hard link to https:
HTML:
<img src="https://example.com/images/image.jpg" />
CSS:
background-image: url(https://example.com/images/image.jpg);
and again, not working. what happens is the images all buffer and as soon as they are fully downloaded and displayed,they disappear abruptly.
All of the images are available over https or http so I do not understand the issue here. Would appreciate a little insight into this and whether its a cloudflare specific issue or an issue with how I'm writing my code. Can anyone confirm that relative paths should call assets via whatever protocol is currently in use? ive not seen any issue with it in the past.
Thanks in advance
Odd problem.
Would appreciate a little insight into this and whether its a
cloudflare specific issue
In general, there should be no problem to do what you are asking, there's no CloudFlare issue
or an issue with how I'm writing my code.
Both of your code examples look good to me, the first perhaps preferable because it will work with both HTTP and HTTPS
<img src="//example.com/images/image.jpg" />
Have you
ruled out browser issues by testing with another browser?
cleared the CF cache?
tested with CF set to development mode?
ruled out any app related issues by testing https image loading on a plain HTML page?
tried changing the CF SSL Level (Flexible, Full, Strict)?
if still no joy, can you post a URL?
Good luck!
As it turns out this was a Cloud Flare issue. They have a feature called Rocket Loader, which compresses all your js files into one long minified JS file which was apparently causing one of my scripts to break, only when served over https. It has been raised as a bug with Cloud Flare support (as it is odd that it works over http but not https). This particular issue was with sss.js (Super Simple Slider) the solution supplied by Cloud Flare Support was to change my script tag for sss.js from:
<script type="text/javascript" src="js/sss.js"></script>
and adding data-cfasync="false" to the tag:
<script type="text/javascript" data-cfasync="false" src="js/sss.js"></script>
Apparently this extra bit of code makes Cloud Flare's Auto-Minifier and Rocket Loader ignore that particular file.
gog.com has a HTTP site (http://www.gog.com/) and a HTTPS site (https://secure.gog.com/).
When I visit the HTTPS site in Firefox, the Login/Sign-up link is visible:
When I visit the HTTP site in Firefox, the link is missing:
But when I visit the HTTP site in Chromium, the link is visible:
So gog.com doesn't seem to hide the login link in general on HTTP. In fact, if I disable the CSS, I can see the login form on the HTTP variant on Firefox, too:
I contacted the gog.com support, but they were not able to reproduce it.
I tested it with three different Firefox installations on different systems, and I never saw the Login/Sign-up via HTTP. Is it only me?!
I checked the source code with Firebug. For HTTP, the relevant part seems to be:
<div class="nav_user">
<div class="nav_empty not_logged"></div>
</div>
For HTTPS, it looks like:
<div class="nav_user">
<div class="nav_link nav_account nav_login" data-hoverclass="hover_acc">
<span class="nav_login_icon"></span>
<span class="nav_text">Login / Sign-up</span>
<div class="nav_hover"></div>
</div>
<div class="nav_cart_h">
<div class="nav_empty"></div>
</div>
</div>
Does someone have an explanation for this? Why does it work in other browsers but not in Firefox?
EDIT: Other things on their HTTP site don't seem to work in Firefox either (but on HTTPS without any problems). For example I can't use the big carousel on the home page: clicking the navigation arrows doesn't do anything, clicking at one game neither.
So all these problems are probably related to JavaScript? Does Firefox have any security features that disallow some functions on HTTPS or something like that?
For whatever reason, gog.com requires local storage for HTTP (but not HTTPS).
So the about:config setting dom.storage.enabled needs to be true.
(Similar problem with JS on anime.stackexchange.com and japanese.stackexchange.com)
I'm having some weird iframe problems with firefox. I'm using 4.0.1.
I'm embedding a gcal. Here's the code
<iframe src="https://www.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&mode=AGENDA&height=400&wkst=1&bgcolor=%23FFFFFF&src=oliversong%40comcast.net&color=%23182C57&ctz=America%2FNew_York" style=" border-width:0 " width="500" height="400" frameborder="0" scrolling="no"></iframe>
And this gcal works perfectly in chrome and opera, just doesn't display at all in firefox. The html isn't called at all, and it just displays an empty iframe with empty and elements.
Funny thing is if I put two of the same iframe consecutively, the second iframe will appear correctly.
I tried doing
<iframe style="display:none"></iframe>
<iframe src="https://www.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&mode=AGENDA&height=400&wkst=1&bgcolor=%23FFFFFF&src=oliversong%40comcast.net&color=%23182C57&ctz=America%2FNew_York" style=" border-width:0 " width="500" height="400" frameborder="0" scrolling="no"></iframe>
and to my utter suprise this does what I want it to.
This is super juke-y though and I don't want to leave it at that.
WHY DOESN'T IFRAME WORK IN FIREFOX?
//edit
Another thing: the iframe appears correctly on the google page, where they provide you with the code to embed.
That leads me to believe that my own site is the problem, but I have no idea why that would be the case, because I have no css or javascript targeting iframes or the div containing it. It also doesn't explain why it only happens in firefox. I also tried flushing the cache and clearing cookies and everything.
You need to escape your ampersands (&). Leave them unescaped could mean the URL is being misread.