I have multiple youtube video embeds inside a container, autoplay is enable but my problem is how to mute all the videos using javascript or any
<div id="video-container">
<iframe width="300" height="200" src="https://www.youtube.com/embed/o_nfdzMhmrA?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br><br>
<iframe width="300" height="200" src="https://www.youtube.com/embed/aBqU0LDd3WY?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br><br>
<iframe width="300" height="200" src="https://www.youtube.com/embed/ihc964sRt8M?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
I made a FIDDLE as an example but I don't know how to do it
Assign ids to each of your iframes, instanciate a player for each of them and mute the video when the player is ready :
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 players = new Array();
var players_list = ["ytplayer0", "ytplayer1", "ytplayer2"];
function onYouTubeIframeAPIReady() {
for (item in players_list) {
players[players_list[item]] = new YT.Player(players_list[item], {
events: {
'onReady': onPlayerReady
}
});
players[players_list[item]].name = players_list[item];
}
}
function onPlayerReady(event) {
players[event.target.name].playVideo();
players[event.target.name].mute();
}
<div id="video-container">
<iframe id="ytplayer0" width="300" height="200" src="https://www.youtube.com/embed/o_nfdzMhmrA?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<iframe id="ytplayer1" width="300" height="200" src="https://www.youtube.com/embed/aBqU0LDd3WY?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<iframe id="ytplayer2" width="300" height="200" src="https://www.youtube.com/embed/ihc964sRt8M?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
Here is a working jsfiddle
HTML
<iframe id="ytplayer" type="text/html" src="https://www.youtube-nocookie.com/embed/zJ7hUvU-d2Q?rel=0&enablejsapi=1&autoplay=1&controls=0&showinfo=0&loop=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>
JS
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
player.mute();
player.playVideo();
}
Related
After clicking the thumbnail, the youtube video is not opening. It leaves white blank, have to reload to see the main video
$(function () {
var videos=$(".video");
videos.on("click", function () {
var elm=$(this), conts=elm.contents(), le=conts.length, ifr=null;
for (var i=0;
i < le;
i++) {
if (conts[i].nodeType==8) ifr=conts[i].textContent;
}
elm.addClass("player").html(ifr);
elm.off("click");
}
);
}
)
<div class="video">
<img class="zoom-video" src="~/image/body/special-offer.png">
<iframe width="600" src="https://www.youtube.com/embed/Ze7xsy9tVVQ" frameborder="0" allowfullscreen></iframe>
</div>
Try to copy the provided iframe from the video. Go to the video, click share, then click embed.
Copy paste the code there and try to run the code again.
Here's an example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
All,
I am trying the implementation of buttons that control multiple videos at once.
▼Sample:
https://jsfiddle.net/g3q6ts0k/31/
▼HTML:
//play
var clickElement = document.getElementById("play");
clickElement.addEventListener("click", function(event) {
player.playVideo();
}, false);
//pause
var clickElement = document.getElementById("pause");
clickElement.addEventListener("click", function(event) {
player.pauseVideo();
}, false);
//change
$('#play').click(function() {
$('#play').css('display', 'none');
$('#pause').css('display', 'inline-block');
});
$('#pause').click(function() {
$('#play').css('display', 'inline-block');
$('#pause').css('display', 'none');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media">
<iframe class="player" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0"></iframe>
</div>
<div class="media">
<iframe class="player" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/ZxnRp4p9SGk?enablejsapi=1" frameborder="0"></iframe>
</div>
<div class="media">
<iframe class="player" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/D-eX-rnvEzI?enablejsapi=1" frameborder="0"></iframe>
</div>
<button id="play">play</button>
<button id="pause">pause</button>
Do you know the reason why it does not work properly?
Thanks.
In the beginning,the video is show,but the it is stop.
I want to play the video when browser starts.
<html>
<head></head>
<body>
<!-- NOTE: ?api=1 and player_id at the end of the URL -->
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
var player = $f(document.getElementById('player'));
player.addEvent('ready', function() {
player.api('play');
});
</script>
</body>
</html>
The froogaloop2 js is not working now try to use player.vimeo.com/api/player.js.
Just try like this
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var frame = document.querySelector('iframe');
var jqueryPlayer = new Vimeo.Player(frame);
jqueryPlayer.play();
console.log('played the video!');
</script>
I have run this code, just check the out put
You can refer to this https://github.com/vimeo/player.js#create-a-player for more details.
I have several youtube iframes with TV channels on my website page.
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/ntBxGznOML0?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/zl4aeAfhdro?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/URD4UWm-edg?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/75j9l956bVs?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
I'm trying to use one java script to play video muted and to stop it on pause event but it doesnt work for me. The script is following
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event){
player.stopVideo(0);
}
}
function onPlayerReady(event) {
player.mute();
player.playVideo();
}
I need to full stop video on pause event, because it is live tv channel, so if I press pause now, in 10 minutes I will get a record but not a live stream. How can I make my script work?
UPDATE
OP has multiple players and uses plain JavaScript, the following changes are:
Multiple players shared the same id, now each player has a unique id.
Added a <button class='stop' data-id='yt*'>STOP</button> for each player.
Each button has a data-id. It's value corresponds to it's player's id.
Wrapped <section id='videoChannels'></section> around everything.
Added the eventListener to #videoChannels so when a button is clicked #videoChannels is referred to as the target.currentTarget which can be compared to the event.target to determine the button that was clicked (i.e. event.target).
After the capture eventPhase the event chain reaches event.target (the button that was clicked) and the function ytCommand() is called on the player that corresponds to the button (see step 2.)
Working Demo
PLUNKER
Stopping YouTube Player
Access the iframe by using contentWindow method
Next cross-domain communication through an iframe is possible with the postMessage API.
Next post commands from YouTube iFrame API
Relevant Code
$('#stop').on('click', function() {
$('#ytPlayer')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
Working Demo
FIDDLE
Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Stop YTPlayer</title>
</head>
<body>
<section id="videoChannels">
<div>
<iframe id="yt0" class="player" src="https://www.youtube.com/embed/8IzxdjVr5ZI?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt0'>STOP</button>
</div>
<div>
<iframe id="yt1" class="player" src="https://www.youtube.com/embed/AhenpCh6BO4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt1'>STOP</button>
</div>
<div>
<iframe id="yt2" class="player" src="https://www.youtube.com/embed/HrmF-mPLybw?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt2'>STOP</button>
</div>
<div>
<iframe id="yt3" class="player" src="https://www.youtube.com/embed/6KouSwLP_2o?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt3'>STOP</button>
</div>
</section>
<script>
var vidCh = document.getElementById('videoChannels');
vidCh.addEventListener('click', ytCommand, false);
function ytCommand(event) {
if (event.target != event.currentTarget) {
var btn = event.target.getAttribute('data-id');
var ytp = document.getElementById(btn);
ytp.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
}
}
</script>
</body>
</html>
I've tried every possible solution I can find, but I can't seem to mute my iframe vimeo video. I've referenced "//f.vimeocdn.com/js/froogaloop2.min.js" in the head. And I'm using the following javascript at the bottom of the page...
<script type="text/javascript">
var iframe = document.getElementById('vimeo_player');
var player = $f( iframe );
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
You can see my attempt here: http://walkinthedog.com/video-test/
Any help is most appreciated.
Use setVolume from the api in your vimeo embed.. player.api('setVolume', 0); it will be like this...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083? title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script>
var iframe = $('#vimeo_player')[0],
player = $f(iframe),
status = $('.status');
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
With the latest version, there's an even easier solution:
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var player = new Vimeo.Player(document.getElementById("vimeo_player"));
player.on('play', function() {
player.setVolume(0)
});
</script>