I'm trying to make a iframe Youtube plays after my preloaded screen fade out. Currently, I'm using jQuery to fade out the preloader screen.
Which I'm using this code there
$(window).on("load", function () {
$('.pre-loader').fadeOut(1000);
});
Somehow his set of code can't run if I insert this in the windows.on load function. I have to place it outside the window.on load function. Couldn't understand why.
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('existing-iframe-example', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log('player ready');
event.target.playVideo();
}
function onPlayerStateChange(event) {
console.log('event change')
}
This is how the iframe code I'm using in my html
<iframe id="existing-iframe-example" class="yt-video"
src="https://www.youtube.com/embed/niRUIXag55I?enablejsapi=1&rel=0" frameborder="0"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
In my console.log, I can see 'player ready' and 'event change'. But the youtube video just can't play.
Any help here will be deeply appreciated.
Related
I want to have a mute button for my site, so when it's pressed it will unmute / mute the audio playing from the background video.
The js I have rn is this. Is there any way I can implement a button with this code?
`enter code here
var videos = [
'D1sZ_vwqwcE',
'BC_Ya4cY8RQ',
'HPc8QMycGno',
'JDglMK9sgIQ',
'hgKDu5pp_fU',
'oKMNj8v2gKE',
'TfnRTifSWh0',
'xO3aB5C3dpQ',
'v5hepekcHkk',
'4kjpZ_sPxzc',
];
var index=Math.floor(Math.random() * videos.length);
var html='<div class="video-background"><div class="video-foreground"><iframe frameborder="0" src="https://www.youtube.com/embed/' +videos[index] + '?controls=1&showinfo=0&rel=0&autoplay=1&iv_load_policy=3&&mute=1" allow="autoplay""></iframe></div></div>';
document.write(html);
site for reference: https://enph.la
I deserve no credit for this answer, but wanted to point out that the described issue actually got solved in Custom mute/unmute button Youtube API quite well using the YouTube API as it can be seen in this working example from Marco Aurelio Fernandez Reyes
(somehow it just works on jsfiddle, but not on stackoverflow...):
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('youtube-video', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady() {
console.log("hey Im ready");
//do whatever you want here. Like, player.playVideo();
}
function onPlayerStateChange() {
console.log("my state changed");
}
document.getElementById("mute").addEventListener('click', function(event) {
console.log(player);
if (player.isMuted()) {
player.unMute();
} else {
player.mute();
}
});
#mute {
width: 50px;
height: 50px;
background-color: red;
}
<iframe id="youtube-video" width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&
autoplay=1
&disablekb=1
&enablejsapi=1
&loop=1
&controls=0
&mute=0" frameborder="0" enablejsapi="1" allowfullscreen></iframe>
<div id="mute">
</div>
<p>
Press red square to mute/unmute
</p>
Since a comment easily be overlooked, I just wanted to point out the working solution.
Is it possible to detect if a video has been removed or is no longer available on Youtube using the iFrame API?
The following code will detect changes to the youtube iframe but the only data point I can find thats remotely close is -3 which means unstarted but this could be applicable to any working video as well.
CodePen
<iframe id="yt-iframe" width="630" height="354" src="http://www.youtube.com/embed/Rlm8YH2i9gY?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>
<script type="text/javascript">
var tag = document.createElement('script');
tag.id = 'yt-script';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
console.log('yt scripts loaded');
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('yt-iframe', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log('video player ready');
}
function onPlayerStateChange(event) {
console.log(event.data);
}
</script>
You can detect before playing the video by checking the duration of the video, if duration of the video is 0 seconds then it is highly likely to be deleted/can't be played
<iframe id="yt-iframe" width="630" height="354" src="http://www.youtube.com/embed/tPEE9ZwTmy0?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>
<script type="text/javascript">
var tag = document.createElement('script');
tag.id = 'yt-script';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
console.log('YT scripts loaded');
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('yt-iframe', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log('Video player ready');
if (event.target.getDuration() <= 0) {
console.log('Video likely to be removed');
}
}
function onPlayerStateChange(event) {
console.log(event.data);
}
</script>
Setup an onError event handler and check for event.data === 100. The YouTube IFrame Player API describes all of the player error events.
No, atleast not straightforward.
Any idea why this script doesn't work? All I want is to track onStateChanged event, but that is never called either.
When I open the html document with below code, I have no errors, the youtube script loads just fine, the player object is not undefined, looks fine too.
$(document).ready(function(){
loadScript();
});
function loadScript() {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
alert(player);
}
var done = false;
function onPlayerStateChange(event) {
alert('state changed');
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 3000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
function onPlayerReady(event) {
event.target.playVideo();
}
My iframe:
<iframe id="player width="400" height="300" src="https://www.youtube.com/embed/j0pJekWgeFE" frameborder="0" allowfullscreen></iframe>
See fiddle: https://jsfiddle.net/rg2uy1f8/
I found an answer here: How do I get the reference to an existing YouTube player?
The reason my solution didn't work, was that my iframe was missing an attribute: enablejsapi="1" and also I was missing: ?enablejsapi=1 in YouTube video url.
You may find the working solution here: http://jsfiddle.net/bf7zQ/2/
<iframe width="763" height="448" src="http://www.youtube.com/embed/videoseries?list=PLD7SqVUGDdDBw_xmMKTDF5MlBwys_KlUk&showinfo=0&rel=0&autoplay=0" frameborder="0" allowfullscreen style="margin-top:5px; margin-left:5px;"></iframe>
When I try it embedding just a video it works, but when I disable autoplay in "embed playlist code" it doesn't work.
In first video it doesn't play automatically but when video ends, it plays the next video, I want it to stop after each video.
any idea?
I find the solution of this situation, here are the codes that I was searching for and maybe it helps you too.
<div id=player></div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '448',
width: '763',
playerVars: {
'showinfo': 0,
'controls': 0,
listType: 'playlist',
list: 'PLD7SqVUGDdDBw_xmMKTDF5MlBwys_KlUk'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
// event.target.playVideo();
}
function play_this_video(){
player.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.stopVideo();
}
}
</script>
I have used a iframe video in my web page. This is my html code
<iframe id="video1" width="520" height="360" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
Play video
I need to play video onclick the play video link. How can i do that?
This works, it appends autoplay=1 to the url causing the video to start playing.
addendum: If your video's source does not already have a querystring then it would be prudent to add a ? instead of a &, as is sometimes the case. This can be done by looking for its existence.
<iframe id="video1" width="520" height="360" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
Play video
<script>
//use .one to ensure this only happens once
$("#playvideo").one(function(){
//as noted in addendum, check for querystring exitence
var symbol = $("#video1")[0].src.indexOf("?") > -1 ? "&" : "?";
//modify source to autoplay and start video
$("#video1")[0].src += symbol + "autoplay=1";
});
</script>
However, most people inherently understand that if they want a video to play, they will just click on it and I would suggest just leaving that to them or starting the video off with autoplay.
Also need to mention that autoplay does not work on mobile devices (powered by Android or iOS)
I correctly set in end src - ?autoplay=1
<iframe id="video1" width="450" height="280" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
Play button
<script>
$("#playvideo").click(function(){
$("#video1")[0].src += "?autoplay=1";
});
</script>
Here is another example. Check this here: https://codepen.io/rearmustak/pen/VXXOBr
const Player = document.getElementById('player2');
const PlayBtn = document.getElementById('play');
const stopBtn = document.getElementById('stop');
let times = 0, playY;
const playVideo = PlayBtn.addEventListener( 'click' , () => {
if(times == 0){
playY = Player.src += '?autoplay=1';
times = 1;
}
});
stopBtn.addEventListener( 'click' , () => {
playY = playY.slice(0, -11);
Player.src = playY
times = 0;
});
.video-frame{
overflow: hidden;
margin-bottom: 10px;
}
button{
border: none;
background-color: #e75252;
color: #ffffff;
padding: 10px 15px;
border-radius: 3px;
cursor: pointer;
}
button:focus{
outline: 0;
}
#stop{
background-color: #ff0002;
}
<h1>Youtube video Play/Stop</h1>
<div class="video-frame">
<iframe id="player2" width="560" height="315" src="https://www.youtube.com/embed/cs1e0fRyI18" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<button id="play">Play</button>
<button id="stop">Stop</button>
since the first answer is already 3 years old, let me point to the Youtube Player API. With that you can remote control your embedded player.
See https://developers.google.com/youtube/iframe_api_reference?hl=en
With a small adjustment, you can start the video via link and without reloading the entire iframe:
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<!-- The Play-Link will appear in that div after the video was loaded -->
<div id="play"></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: '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();
document.getElementById('play').innerHTML = 'Play Video';
}
function play(){
player.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
here is link to example http://jsfiddle.net/WYwv2/5/
Check out this
<!DOCTYPE html>
<html>
<body>
Play video
<iframe id="video1" width="520" height="360" frameborder="0" ></iframe>
<script>
function playme() {
document.getElementById("video1").src = 'http://www.w3schools.com/tags/mov_bbb.mp4';
}
</script>
</body>
</html>
We set the source of video dynamically.
it's work for me.
please Check out this.
$("#player").on("pause", function(e) {
clearTimeout(playTimeout);
});
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 2000);//replace time here
$("#player").get(0).load();
$("#player").get(0).pause();
done = true;
}
}
function stopVideo() {
player.stopVideo();
}