I recently developed a website that has a streaming video as its full-screen background that autoplays & loops when the website loads. It was working in Chrome until very recently. Google changed their policy on autoplaying video in April, so I believe this may be the reason. The new google policy says that muted video is still allowed to autoplay, but that doesn't seem to be helping me (I already had it muted). The video still autoplays and loops in Firefox.
The code that I'm using to stream the video is as follows:
<iframe class="embed-responsive-item"
src="https://player.vimeo.com/video/240749191?muted=1&autoplay=1&loop=1&background=1"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
The website is live at Hypempire.com
Related
Ive got a very basic WordPress website using the new 2017 theme and I'm trying to embed a simple video. The video is on OneDrive, but it should be the same as YouTube or any other source, and I can play the video fine in a plain HTML page.
When I insert the following HTML iframe in my post:
<iframe src="https://onedrive.live.com/embed?cid=3F3E866DF352275A&resid=3F3E866DF352275A%21106&authkey=ADg-86mHmhzI3mw" width="320" height="180" frameborder="0" scrolling="no" allowfullscreen></iframe>
It shows a small blank frame for a few seconds when I preview the post, then it jumps to the onedrive embedded link showing the video full screen, so you cant see the post.
I tried using a plugin too and that didn't work either, somehow it had the same problem. I was using FV player which seems to be very popular but when I try to embed this video it says there "Video Issues". I know there's nothing wrong with the video because, again, I can insert this iframe in a plain HTML page and it works no problem. Only when I embed the iframe in a wordpress post does it pop out into the onedrive link and go full screen.
Any suggestions? This should just work and I don't know what I'm missing.
src="https://onedrive.live.com/embed?cid=3F3E866DF352275A&resid=3F3E866DF352275A%21106&authkey=ADg-86mHmhzI3mw"
replace the embed with download. and use normal video tag instead of iframe.
src="https://onedrive.live.com/download?cid=3F3E866DF352275A&resid=3F3E866DF352275A%21106&authkey=ADg-86mHmhzI3mw"
I uploaded a video to Google Drive and I created a blog in Blogspot. Then, I inserted a code like this in one of my blog posts:
iframe width="560" height="315"
src="http://drive.google.com/file/d/0B21fQyiIJBBnWms0S2UyaUFNeWM/preview"
frameborder="0" allowfullscreen="true" / iframe
I have tested the code under the following conditions and get the following results:
When using my PC, I can go to fullscreen and select the video quality/subtitles (another button);
When using Safari for iPad, I can see the video quality/subtitles button, but can't go to fullscreen;
When using Mercury Browser for iPAD with user-agent "Safari (iPhone Mobile)", I can't see/use the video quality/subtitles button, but now I am able to go fullscreen;
Google Drive's app from App Store can't use the video quality/subtitles button, but is also able to go fullscreen;
Puffin browser (app from App Store) is able to use the video quality/subtitles button and go fullscreen. However I stopped using this for 2 reasons:
Video takes a lot of time to load. In Safari, it takes a couple of seconds. Using Puffin, over 10. Don't know why, but it looks like it's either my iPad that is slow (4th gen, last iOS), or this is to be expected;
Even when the video is playing, it looks like playback is stuttering. I mean, not running smoothly, as the same browser does in the Youtube website. BTW, Puffin supports Flash, but until recently, this functionality was paid and lasted only a short time;
My questions are:
why is 2) happening?
Can it be fixed by using another CODE in my personal blog/website or I do need to wait for future iOS updates?
Also, Youtube's iframe allows us to go fullscreen in Safari from iPad. Which means Google is to be blamed (I guess) for this to happen with Google-Drive.
I wonder if there's a way to bypass this restriction, and force the player to go fullscreen, also showing subtitles, as it happens with Youtube.
On our website which is built in Kentico we have embedded a youtube video, as follows:
<div class="youtube">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/<%# Eval("YouTubeId") %>?autoplay=0&autohide=1&controls=1&loop=0&playlist&rel=0&fs=1&wmode=transparent&showinfo=0&modestbranding=1&iv_load_policy=1&start=0&theme=dark&color=red&enablejsapi=1&" frameborder="0" allowfullscreen></iframe>
</div>
The above iframe has a thumbnail associated with it, which looks like this
<div class="poster"><span></span><%# IfImage("Thumbnail",GetBrickImage(Eval("Thumbnail"), "featurevideo", Eval("Title")), "") %></div>
and sits just under the closing div of class youtube.
Now my issue is when the users come to the site and presses play on the thumbnail the video doesn't play straight away instead the thumbnail disappears and the default youtube play button appears making the user press play again, when I use the developer tool bar and press play for the first time I get the error
Blocked loading mixed active content "http://www.youtube.com/iframe_api"
I cannot for the life of my figure out what is going wrong, We have recently installed a SSL certificate on the server this site currently sits on and since then its been causing this issue. From what I have read and see people were suggesting to drop the www. so it would be https://youtube.com.... again this didn't help me. I then went and tested this on IE10/Chrome and the issue is still happening. Can anyone suggest anything for this?
It is a limitation of the CKEditor. It has been resolved in version 8.2.1.
http://devnet.kentico.com/questions/kentico-v8-ckeditor-youtube-embeds-https
Today I found that my youtube videos embeded in iframe does not autoplay
for example.
http://www.youtube.com/embed/U3NVhtUhMbM?autoplay=1
is the autplay deprecated?
plus previously when pressing share button on youtube, it had autoplay parameter, now it's gone
There is a known issue with YouTube API.
Star this issue to get updates on it.
Am tasked with building an ASP.NET 4.0 Web Forms site to support playback of YouTube videos. Will build it as a HTML5 site but am trying to weave my way through the maze of video formats/codecs.
I do not want to use plugins and I want it to have cross-browser support:
IE9/IE8/IE7
Firefox
Chrome
Safari
Majority of traffic will be IE. For the other browsers, latest versions will suffice.
I'm looking to embed the videos directly. Really just need to know how to cater for the different browsers without use of plugins (incl. Google Frame).
Can anyone provide some guidance/direction?
UPDATE
Per Stilgar's answer, there probably will be no advantage gained to creating this as HTML5
If you only need to embed videos from youtube you don't need to care about codecs and browser support. You only need to render the Youtube embed code on your page which is just an iframe. The user can get the html by clicking share > embed on youtube or you can generate it programatically when the user pastes an URL to an youtube video. The code looks like this:
<iframe width="560" height="315" src="http://www.youtube.com/embed/Kt82xgsm9N8" frameborder="0" allowfullscreen></iframe>
If you do this youtube will provide a player for the user. The player will be based on the user's settings IN YOUTUBE. For example if the user has selected HTML5 videos on youtube he will get an HTML5 player for his browser. If the user has opted in for Flash or is using an older browser youtube will serve the Flash player. Also some videos (those with ads) are only available with Flash.
Basically even if you want to do something else you can't. That's how Youtube works and you want to embed their videos not serve your own. However I don't see why you will want something different from what they provide. They make their best to support every browser in the best way.
And just FYI the video tag is supported on the latest version of all browsers and is not supported in IE8 and IE7. There are two codecs (with 2 formats) that are important right now these are H.264(mp4) and VP8 (webm)
Safari (including Safari on iOS) and IE9+ (including IE on Windows Phone) support H.264
Chrome, Firefox and Opera support VP8
If you want to support all browsers via the video tag you need to provide both encodings and encode the video twice.
If you want to support IE7 and IE8 your only option is a plugin (be it Flash, Silverlight or just regular old Media Player Plugin that comes by default)
I haven't used it myself yet but I've heard some good things about jPlayer. Check out http://jplayer.org/.
One thing to keep in mind is that while many browsers support HTML5 semantics, they don't support the same codecs. You'll need to encode your video into the various formats that each browser supports. Wikipedia has an example at http://en.wikipedia.org/wiki/HTML5_video.
<video poster="movie.jpg" controls>
<source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
<source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'/>
<source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
<p>This is fallback content</p>
</video>