I got an issue, I am not able to solve with all topics on stackoverflow and github.
I am placing certain Videos via Iframe into my page. Whatever I do, the Fullscreen-Button is greyed out. By clicking, I get the message "Fullscreen not available". Same happens with Vimeo Vids, where the Fullscreen button doesnt appear. Same happens on IOS, Mozilla, Android & Chrome.
I tried to solve it via all the commands, I found here. "allowfullscreen", "allowFullScreen", "allowFullScreen="True"" allowFullScreen='true' mozallowfullscreen webkitallowfullscreen allowFullScreen, ...
It seems, that my page itself prevents the fullscreen-mode. If I put my Iframe into clean HTML5-sheets outside my wordpress page, everything works perfectly.
My iframe:
<div class='youtube-container-100' allowFullScreen='true' mozallowfullscreen webkitallowfullscreen allowFullScreen>
<iframe src='https://www.youtube.com/embed/-mzrMWL5sYQ?rel=0&modestbranding=1' allowfullscreen></iframe></div>
Putting the iframe without the div doesnt change anything.
I created a testpage: https://my-sushiparty.de/testseite/
Thank you so much :-)
I tried to solve it via all the commands, I found here. "allowfullscreen", "allowFullScreen", "allowFullScreen="True"" allowFullScreen='true' mozallowfullscreen webkitallowfullscreen allowFullScreen, ...
It seems, that my page itself prevents the fullscreen-mode. If I put my Iframe into clean HTML5-sheets outside my wordpress page, everything works perfectly.
YouTube can disable fullscreen view on embedded videos. The "allowFullScreen" command used to work, but it was probably fixed recently.
I've also tried looking for a script that could re-enable the feature, but unfortunately it seems that the latest patch doesn't have a current workaround.
Related
When I embed Youtube video on a page and test it locally nothing happens or the browser even locks up, depending on the browser. Publish the page, test online and it works fine. Obviously not an ideal develop/test scenario. I'm using the iframe embed code from Youtube.
It sure seems like a cross domain security issue but I see no errors using Firebug and haven't found any reference to that nor anyone with a similar problem. Probably just missing something but I'm stumped. I don't like being stumped... for long.
Example that works online but not locally even if this is the only code in the body:
<iframe width="640" height="360" src="//www.youtube.com/embed/INg83kArY4g?rel=0" frameborder="0" allowfullscreen></iframe>
BTW, no problem embedding and playing the same video locally when hosted on my own web server (not locally). Any help would be appreciated.
The reason that file will not load locally is because you are using a protocol relative URL when defining the src attribute.
When the browser parses the src it will prepend the scheme(http: or https:) that the page is viewed in. If the page is being viewed locally, your browser will prepend file to the URL and that will result in an invalid URL.
You can remedy the issue by inserting a scheme on the src e.g.
src="http://www.youtube.com/embed/INg83kArY4g?rel=0"
or by serving up that page on a local server.
Reference
Paul Irish
Try adding 'http:' to the beginning of the src attribute:
<iframe width="640" height="360" src="http://www.youtube.com/embed/INg83kArY4g?rel=0" frameborder="0" allowfullscreen></iframe>
One page app, where there are user-profile pages(that you change dynamically).
This doesnt work, it appears as link
<a href='https://twitter.com/{{user.twitter}}' class='twitter-follow-button' data-show-count='false' data-size='large'>Follow #{{user.twitter}}</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
If it reinitializes the code it doesn't work either
<div ng-show="user.twitter" ng-bind-html-unsafe="user.twitter|followButton">
I'm currently working on an Angular app where I need to implement such widgets - from Facebook, Twitter, Google+ and Pinterest.
Although I wasn't able to make the Facebook button work without using its iframe form, the other three work like charms (read on).
The real issue with Angular seems to be the asynchronous Javascript codes these platforms usually provide (which dynamically create a script tag calling the actual JS code needed to make the button work). If you call the right JS file directly (and synchronously), it works great.
Example for Twitter :
<!-- This won't work : -->
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- This will (note I'm using the same URL for the script) : -->
Tweet
<script src="//platform.twitter.com/widgets.js"></script>
I forgot about Iframe, there's no option on twitter when you generate the button. So it works!
<iframe ng-show="user.twitter" allowtransparency="true" frameborder="0" scrolling="no"
src="//platform.twitter.com/widgets/follow_button.html?screen_name={{user.twitter}}"
style="width:300px; height:20px;"></iframe>
Also very important: iframes update history. To solve this problem I generate element iframe dynamically and then appendChild it to the location where it is supposed to be.
Here's a good example: http://nirlevy.blogspot.com/2007/09/avoding-browser-history-when-changing.html
I am trying load a YouTube video into a HTML 5 tag.
The problem I am having is I do not know what the “src” property should be. Using the URL for a video on YouTube does not seem to work, that URL seems to retrieve an entire page rather than just a video file.
I have been able to copy and paste YouTube’s own tag (by viewing the page source), that they use on their pages, but this is not a very efficient or long term solution. Is there a better solution?
I have tried to use YouTube’s API, but no matter what I do, it seems always to pull in the flash player version of the player (which of course won’t work for iOS.) Am I missing something obvious here?
This blog post might help: http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
The suggestion is to use this code:
<iframe class="youtube-player" type="text/html" width="640" height="385"
src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>
The iframe will autodetect HTML5 capabilities and use them; if not, it uses Flash as fallback.
recently I discovered issues with embedded youtube videos on my site - the fullscreen-button does not work anymore. It sure did once. The button is visible, but when clicked, nothing happens.
I'm using the Youtube Javascript API to embed videos in my website, much like this example by Google http://code.google.com/apis/ajax/playground/?exp=youtube#simple_embed
I use the fs=1-Parameter to enable the Fullscreen-Button.
If you wanna try this out, just append it to the URL-Parameters in the example and hit "Run Code". It even doesn't seem to work in the Google Code Playground! Is this a general problem or might there be some workaround? I tried this in Chrome, FF and Opera, it's all the same.
My site http://trashnet.de/youloop/?id=HCdkYRx63HM
Best regards :)
Ah, figured it out: you need to set allowFullScreen to 'true'.
I've tried to create simple facebook app with iFrame,, but I always get nested iFrame on every I click link on my application, I already tried a solution from site http://railsrant.com/2009/10/14/creating-a-facebook-iframe-app-using-ruby-on-rails-facebooker/
it's work on Firefox and Chrome, but doesn't work at IE
Any idea or suggestion for this?
Thanks
I think you should use this line in your head section, this will open the links in parent window instead of iframe in iframe:
<base target="_parent" />
and also make these URL related to canvasURL(facebook app URL). I hope this will solve your problem.
add target="_top" to your <a href="..."> links