I wanted to use a youtube video as a background for my website (mostly because of their bandwidth check and setting the video quality). When I try to autoplay and loop it though (via setting loop and autoplay parameters), I still have the circular loader there. Is there any chance to automatically start the video with no delays (even if it's going to be a bit laggy on the first load) and then just progress with the download, or should I just give up on it?
Thanks,
E.
E: iframe code here:
<iframe src="//www.youtube.com/embed/VID_ID?autoplay=1&loop=1&rel=0&playlist=VID_ID " frameborder="0" allowfullscreen></iframe>
I don't think it's possible to immediately start loading your video from YouTube. How about downloading it (I like to use http://www.convertfiles.com) and then using that? It'll probably be easier to customize your video options when you have it downloaded on your website.
Related
Just a quick question on this and how I can get a youtube video to stop playing when exiting a modal.
We have this homepage slider > https://www.bababing.com/
You can see that when you click on a tile in the slider it opens and starts playing the video. However, when you exit it still plays the video.
Is there anyway we can stop his happening that anyone knows of?
We are using fancy box to open the lightbox area.
Upon the video opening I also want it to autoplay the videos
Any thoughts would be fantastic
Thanks,
Glen
You have youtube player code inside inline content, but the script literally moves your content into the modal and puts back after closing. Therefore, if user interacts with your content, it stays the same after closing the modal.
You have several options:
1) You could use Youtube API to stop/start videos after content is displayed/hidden;
2) Display cloned version of your content (e.g., something like $.fancybox.open( $('my-element').clone(true) ); ), but then you probably still would need to use Youtube API to start video;
3) Build your own content on click event - something like $.fancybox.open( 'there will be youtube iframe code with autoplay option and something more' ); - this way you will avoid messing with Youtube API
4) Use direct links to Youtube like https://www.youtube.com/watch?v=_sI_Ps7JSEk&autoplay=1 - the script will then parse it and load inside iframe automatically
The rel parameter in YouTube API dictates whether or not related videos are shown at the end. When rel=0 the video reverts back to the thumbnail with a play button.
However on mobile (tested on iPhone / iPad / Fire Tablet) when the video goes back to the thumbnail it cannot be played a second time. It just does nothing.
I reported the issue to Google but nothing yet after a few days.
I had to resort to destroying the video and recreating it but this makes for a kind of nasty flickering.
My experience with YouTube issues is they never seem to end up fixing anything related to iOS - so I was wondering if there was any other kind of trick to prevent this.
Test page
The trouble with refreshing a webpage at a specific interval is that you dont know exactly when the video ends so you need to develop a method which the video player sends a signal when the video ends, which would then start the script to refresh the page. Otherwise you end up restarting it in the middle of the video. so personally, I would not even mess with refreshing the page. For Audio players it works ok because audio is smaller and streams more quicker. Video dont.... they always stop to buffer.
So YouTube API uses "Events" and "Listeners", so in particular, you need to design around the Event: "onStateChange".
When onStateChange = "ended" (zero) the video has ended, so then you reload the video player with the same video and set it to its Ready State again.
In theory its very easy you basically need to setup and control the entire video player through javascript. And the API gives examples on that.
http://code.google.com/apis/youtube/js_api_reference.html
http://grizzlyweb.com/webmaster/javascripts/refresh.asp
http://code.google.com/apis/youtube/forum/
Have a look at loop and playlist parameters as well. You can set playlist parameter to video ID and same video can be replayed using this.
So, it will be something like:
http://www.youtube.com/embed/{VIDEO_ID}?wmode=opaque&loop=1&version=3&playlist={VIDEO_ID}
Hope this helps!
Appears to have been fixed by YouTube.
I can now play the video multiple times (on multiple devices) without it getting stuck. Was too busy wondering why my question was getting so little attention that I forgot to check again to see if it was fixed ;-)
As I keep reading, there is no way to enable HTML5 video autoplay in iOS browsers.
So why does my older iPad (with iOS 8) autoplay this introductory video from e.g., http://www.apple.com/ipad-air-2/ ?
When inspecting this on desktop Chrome, I pause at a certain point and see that a script inserts a <video> element with a mp4 file, then removes it after animation finishes. I've examined their script file as well, but did not find a definite answer to this.
I wish to clarify that I do not initiate any action other than opening the url. I have purposefully avoided every contact (no tapping, touching, etc.).
Could someone with more video experience explain this?
This question has been answered to me in a different place, so if someone stumbles upon this later on...
The short answer is that Apple does not show a video on a device such as iPad. They flash a series of JPEG images like a filmstrip, making it appear as though a video is being played. For a desktop browser, they would show a video file though.
My iOS application uses youtube iframe player on UIWebView to play any clip with inline mode. The following code is HTML code used.
<html>
<head>
<style type="text/css">body {background-color: transparent;color: white;}</style>
</head>
<body style="margin:0">
<iframe src="http://www.youtube.com/embed/e2w8z6mI47U?playsinline=1&rel=0&showinfo=0" width="320" height="240" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Then, it is passed to loadHTMLString method.
That code had worked well until a recent date. But, I recently noticed that every clips I used aren't played normally. the standby view and play button is shown but, although I pushed the play button, it didn't play well. black screen was only shown.
I haven't found anything to solve the problem. Are there any changes of Youtube Iframe player or points I missed?
I ended up solving the problem by calling [videoView setMediaPlaybackRequiresUserAction:NO].
I don't exactly know why the method could save me. At a guess, there was a change dealing with the request for playing at youtube. I could find the following changes on youtube developer site.
January 28, 2014
The playsinline parameter controls whether videos play inline or
fullscreen in an HTML5 player on iOS. Setting the value to 1 causes
inline playback.
The Selecting content to play section has been updated to explain how
to find YouTube video IDs and playlist IDs using the YouTube Data API
(v3) rather than the older API version.
The controls parameter's definition has been updated to reflect the
fact that the parameter value only affects the time that the Flash
player actually loads in IFrame embeds. In addition, for IFrame
embeds, the parameter value also determines when the controls display
in the player. If you set the parameter's value to 2, then the
controls display and the Flash player loads after the user initiates
the video playback.
I guess that one of above changes may need extra informations which are passed from a client to youtube server for playing normally.
UPDATE:
Today, I identified that it works well without my solution. It seems that the problem was fixed lately.
I've tried tens of different ways to play a video from YouTube or a server and not have it go into fullscreen. I know it's possible because the YouTube app allows for this to happen but can't seem to figure out how to do it. Please advise!
Check out this answer:
Can I play a youtube video in a UIWebView inline (not fullscreen)?
This solution is iOS 6 & 7 compatible, it involves setting UIWebView's allowsInlinePlayback and setting YouTube's iFrame webkit-playsinline value.