Reputation: 1336
I'm using the YouTube iFrame API to embed a video that plays as soon as it's loaded. The video automatically loads everywhere but mobile IOS. How can I get it to auto play? I added the event.target.mute()
code based on a comment from another thread, but no luck. You can ignore the code in the interval - that's just to help the video loop with a fading effect.
Iframe API code:
<div id="player" class="hero__vid"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: MyVidID,
playerVars: {
controls: 0,
showinfo:0,
rel:0,
},
events: {
'onReady': onPlayerReady,
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
var interval_is_stopped = false;
setInterval(function (){
var current_time = event.target.getCurrentTime();
if (current_time > 14.9 && !interval_is_stopped) {
interval_is_stopped = true;
jQuery('#player').fadeTo(400, 0.7, function(){
player.seekTo(0);
jQuery(this).fadeTo(400, 1, function(){
interval_is_stopped = false;
});
});
}
}, 10);
}
</script>
Upvotes: 1
Views: 6673
Reputation: 31
Use this if you are developing an iOS application.
For the youtube player to auto play, you need to initialize your WKWebView with following configuration
let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true
// this will not require any gesture for triggering playback
config.mediaTypesRequiringUserActionForPlayback = []
// NOTE: WKWebView should be initialized in code as need to set it up
// with custom configuration.
// This is not possible through Interface Builder.
let webView = WKWebView(frame: CGRect.zero, configuration: config)
Also, make sure you have following code in your javascript code. Taken from YouTube Player API reference:
// ...
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// ...
Upvotes: 2
Reputation: 1336
I found out how to do this, Thanks to this answer. IOS 10+ actually natively allows this to happen now, but unfortunately it's only for the HTML5 video tag, so YouTube's iframe won't work, which is a real shame!!
Here's the code I used
<video playsinline preload="auto" loop muted autoplay>
<source src="vid.mp4'" type="video/mp4">
Sadly, your browser does not support the video tag X_x
</video>
Upvotes: 1
Reputation: 1917
This is an iOS restriction. Please see here https://stackoverflow.com/a/8142187/2840591
Or here
https://stackoverflow.com/a/3056220/2840591
Upvotes: 1