There seem to be a ton of posts about this with the general answer being 'you can't', but I don't believe it for a second. There's always a way, right? ;)
I'm linking to a youtube video.
<iframe id="video" class="video" width="560" height="315"
src="https://www.youtube-nocookie.com/embed/myvideo?
controls=1&autoplay=0&modestbranding=1&showinfo=0&rel=0" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
We own the video, and the youtube channel, so we are referencing our own content. On desktop the process is fine - I have a div that expands when you click a play icon, and then a function that swaps the autoplay control in the src:
function playVideo() {
var video = $('.video')[0];
var isPause = video.src.indexOf('autoplay=0') != -1;
video.src = isPause ? video.src.replace('autoplay=0', 'autoplay=1') :
video.src.replace('autoplay=1','autoplay=0');
}
Click play, the div expands and plays the video.
On mobile, the div expands, and does not play the video. I've tried all kinds of things to replicate the click on the play button, to no avail.
Happy to hack this if needs be but there has to be a way to play the iframe content with JS. Just gotta be. The below doesn't work:
$('.ytp-large-play-button.ytp-button').click();
And neither does:
$('.ytp-large-play-button.ytp-button').trigger('click');
I understand I'm trying to access cross domain content and the security around this but I'm only interested in potential solutions. I recently found a way to block a form redirect using the post-form-to-hidden-iframe, whilst keeping the flow of data from the form, so I'm hopeful.
Also hopeful that one of you will say that it's just a simple attribute declaration on the iframe :)
Any bright ideas?
