How to make youtube autoplay work on mobile - javascript

I got this problem for almost 1 week without any solution working.
I have an ReactApp use iframe tag to play youtube video.
The request is to click another tag (such as thumbnail) then video will be played instead of clicking directly to iframe.
Thumbnail have z-index = 2; iframe z-index = 1. When click thumbnail, thumnail will be hidden (display=none).
I can do this by add '?autoplay=1&mute=1' to youtube embed url when click the thumbnail. This works well on desktop. BUT Because youtube not allow autoplay on mobile/tablet so user must click twice for video to play, first click on thumbnail, the next click on iframe.
Is there a way so that use can only click once on thumbnail then theo video will auto play?
My website have different domain with youtube so any way like accessing element inside iframe are not allowed.
This task should be completed with only vanilla javascript/typescript only. We don't prefer using third party like react-player because these player will impact app performance.
Below is codes similar to the real project. I would appreciate to any advice as I am really exhausted with this :)))
<div id="container">
<div id="thumbnail"></div>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/9xwazD5SyVg?autoplay=1&mute=1" title="Dummy Video For YouTube API Test" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Related

Vimeo video slider on homepage

Just need some advice. I have a homepage where I have 3 Vimeo videos added in a slider (page shows different video after refresh).
This slows down the page, and also the videos look fuzzy on the screen, sometimes lagging. They need to be looped, and can not add any click event on it (I was think about the lazyloading but can not work with that as the video needs to be looping constantly).
Do we have any better option for embedding vimeo videos?
I have the following code:
<iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" height="950" src="https://player.vimeo.com/video/753826918?h=431b8314ba&autoplay=1&loop=1&autopause=0&muted=1&background=1" width="100%"></iframe>
Any other suggestions how the videos could be loaded/embedded on the page so it will speed up the loading time? Thank you.

How to remove pause video suggestions / related videos (class: ytp-pause-overlay) from Youtube embed

I have embedded youtube videos on my site. When I pause the video, it show a list of more videos and when video ends it displays a list of suggested videos. I do not want to show these suggested videos on my site.
On inspecting the video, I get the following code
<iframe title="Dummy Video" src="https://www.youtube.com/embed/dummyvideo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" name="dummyvideo"></iframe>
I tried to disable the suggested videos from css, but it's not completely working, for the first time it shows the more video links but later on it hides and when video ends, it always shows the suggested videos.
Here is my css that I have tried
.ytp-pause-overlay {
display: none !important;
}
.ytp-endscreen-content {
display: none !important;
}
I also tried this JS code, but it's not working
document.getElementsByClassName("ytp-pause-overlay ytp-scroll-min")[0].style.display = 'none';
But it's not working and also giving an error on console. Also it should be fired on when someone pause the video otherwise it will throw an error.
Is there any way through which I can target for all the videos using CSS and JS
It isn't possible anymore to apply custom CSS on the content of an iframe.
So in other words: i'm afraid this won't be possible with JS or CSS.

How to focus the controls of a YouTube iframe with postMessage

I'm in way over my head on this one.
The goal is to be able to hit spacebar for play/pause, and f for fullscreen when the page loads.
I'm loading the YouTube embed like this:
<script src="https://www.youtube.com/iframe_api"></script>
<iframe
id="player"
frameborder="0"
allowfullscreen="1"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
width="1280"
height="720"
src="https://www.youtube.com/embed/<?php echo $video_id; ?>?autoplay=1&modestbranding=1&iv_load_policy=3&enablejsapi=1">
</iframe>
The question is, can I focus the iframe controls using postMessage? Or any other method?
If so which element in the iframe do I need to focus to be able to get it done? I think it's html5-video-container > video.
Don't think I even need the YouTube jsapi, but it's there for now.
I've been over this SO question about a dozen times and many others, as well.
You can't do it because you cannot insert the javascript required for postMessage to work into youtube's iframe.
Yes, I see that you created the iframe yourself on your page, but that's not how it works.

Take screenshot from iframe playing youtube

I want to take a screenshot from iframe which is playing a youtube video with a click of a button.
As a small code given below, What I want to do is, Whenever I click on the button it should take a screenshot of whatever is getting played at that particular time so that I can upload it to the server.
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
<button>Take Screenshot</button>

Youtube Video Embed iframe shows the wrong video

I am making a website and I have to show a video on its homepage. The video exists on youtube and I need to embed it on my website.
<html>
<iframe width="560" height="315" src="https://www.youtube.com/embed/spPdelVEs_k?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</html>
Unfortunately my webpage shows a completely different video. It shows this one.
https://www.youtube.com/watch?v=7sNL0T93ItM
Does the URL convert to something different? Help me solve this problem.
Your code is fine. You just need to clear the cookies on your browser and then it should load fine for you.
This is the video your code goes to:
https://www.youtube.com/watch?v=spPdelVEs_k

Categories