Is there any simple way to have multiple embedded YouTube videos on a page and have them start playing as soon as the page is opened and when the first one finished have the second one start?
I was hoping something like this would work:
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1" type="application/x-shockwave-flash" width="425" height="350"></embed></object>
<br>
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2"></param><embed src="http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2" type="application/x-shockwave-flash" width="425" height="350"></embed></object>
And it does for the first one but not the second. I would imagine that I may need to dive into the API. Anyone have any suggestions?
Using the Youtube IFrame API, you can do this easily.
The only part you need to configure here is the array of youtube IDs. You can retrieve those from the part after the /v/ in the URL (If need be, you can modify the javascript to load URLs instead of IDs. I just like this way better.
<div id="player"></div>
<script src="//www.youtube.com/iframe_api"></script>
<script>
/**
* Put your video IDs in this array
*/
var videoIDs = [
'OdT9z-JjtJk',
'NlXTv5Ondgs'
];
var player, currentVideoId = 0;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '350',
width: '425',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.loadVideoById(videoIDs[currentVideoId]);
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
currentVideoId++;
if (currentVideoId < videoIDs.length) {
player.loadVideoById(videoIDs[currentVideoId]);
}
}
}
</script>
Here is an example using the YouTube Iframe Player API.
There are two separate embeds (player1 and player2). The video autoplays when player1 has loaded, and it starts player2 when it completes.
Here is the jfiddle if you want to play around with it.
And the code:
<div id="player1"></div>
<div id="player2"></div>
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player1;
var player2;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player1', {
height: '350',
width: '425',
videoId: 'OdT9z-JjtJk',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player2 = new YT.Player('player2', {
height: '350',
width: '425',
videoId: 'NlXTv5Ondgs'
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player2.playVideo();
}
}
</script>
I am not good at javascript. But I have some similar question before.
you could referece
judgement the first video is finished then run the second. you could set 2 functions.
<div id="player1"></div>
<br>
<object width="425" height="350"><param name="movie" id="player2-param" value="http://www.youtube.com/v/OdT9z-JjtJk"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk" type="application/x-shockwave-flash" width="425" height="350" id="player2-embed"></embed></object>
then
function onPlayerStateChange(event) {
if(event.data === 0) {
$('#player2-param').attr('value','http://www.youtube.com/v/OdT9z-JjtJkautoplay=1');//jquery
$('#player2-embed').attr('src','http://www.youtube.com/v/OdT9z-JjtJkautoplay=1');//jquery
}
}
hope this could help you and write some nicer code, thanks.
Use youtube API and put autoplay true;make aplaylist on youtube and give link to that.
Based on prev sample code. I have created Basic Vanilla JavaScript Youtube Player- With playlist. Checkout Youtube Player- With playlist
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Basic Vanilla JavaScript Youtube Player- With playlist</title>
</head>
<body>
<div class="player" style="width: 480px;height:360px;max-width: 50%;margin: 0 auto;">
<div id="youtube" style="width: 100%;height: 100%"></div>
<div class="controls" style="text-align: center;margin: 0 auto;">
<button style="padding: 10px;width: 100px;background-color: #167AC6;"
onclick="YouTubePlayer.playPrevious()">Prev
</button>
<button style="padding: 10px;width: 100px;background-color: #167AC6;margin-left: 30px;"
onclick="YouTubePlayer.playNext()">Next
</button>
</div>
</div>
<script src="//www.youtube.com/iframe_api"></script>
<script>
var YouTubePlayer = {
current: 0,
player: null,
/**
* Tracks ids here...
*/
videos: [
'vQMnaDNw5FQ',
'Dp6lbdoprZ0',
'OulN7vTDq1I'
],
currentlyPlaying:function(){
console.info('Current Track id', YouTubePlayer.videos[YouTubePlayer.current]);
return YouTubePlayer.videos[YouTubePlayer.current];
},
playNext: function () {
YouTubePlayer.increaseTrack()
if (YouTubePlayer.player) {
YouTubePlayer.currentlyPlaying();
YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
} else {
alert('Please Wait! Player is loading');
}
},
playPrevious: function () {
YouTubePlayer.decreaseTrack()
if (YouTubePlayer.player) {
YouTubePlayer.currentlyPlaying();
YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
} else {
alert('Please Wait! Player is loading');
}
},
increaseTrack: function () {
YouTubePlayer.current = YouTubePlayer.current + 1;
if (YouTubePlayer.current >= YouTubePlayer.videos.length) {
YouTubePlayer.current = 0;
}
},
decreaseTrack: function () {
YouTubePlayer.current = Math.max(YouTubePlayer.current - 1, 0);
},
onReady: function (event) {
event.target.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
},
onStateChange: function (event) {
if (event.data == YT.PlayerState.ENDED) {
YouTubePlayer.playNext();
}
}
}
function onYouTubeIframeAPIReady() {
YouTubePlayer.player = new YT.Player('youtube', {
height: '350',
width: '425',
events: {
'onReady': YouTubePlayer.onReady,
'onStateChange': YouTubePlayer.onStateChange
}
});
}
</script>
</body>
</html>
Don't be complicated, Simply use iframe
<iframe width="560" height="315" src="https://www.youtube.com/embed/nWHpU7H7Clc?playlist=b6KzNmLMW6o,qWE6g8puu98" frameborder="0" allow="autoplay; encrypted-media" style="width:900px;height:400px" autoplay="true"></iframe>
<div id="player1"></div>
<div id="player2"></div>
<input type="button" value="Sustur" id="sus">
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player1;
var player2;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player1', {
height: '330',
width: '600',
videoId: 'mbOuAKqETQY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player2 = new YT.Player('player2', {
height: '330',
width: '600',
videoId: 'e7mV8driAUQ'
});
}
function onPlayerReady(event) {
event.target.playVideo();
document.getElementById("sus").onclick = function() {videoKapat()};
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player2.playVideo();
}
}
function videoKapat() {
player2.stopVideo();
player1.stopVideo();
}
</script>
Related
I am using HTML 5 and I just want to create a webpage where an embedded YouTube video already starts to restart playing after it has reached a certain limit. So, here's the code:--
<!DOCTYPE html>
<html lang="en">
<head> <title>Video Playback</title> </head>
<body>
<script>
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', {
width:150, height:150,
autoplay: 1,
loop: 1,
controls: 1,
vq: 'hd144',
videoId: 'bcdxvxiztyh',
playerVars: {
'playsinline': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
player.mute();
}
var done = false;
function onPlayerStateChange(event) {
setTimeout(stopVideo, 4000);
done = true;
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
</body>
I tried the above code and it just plays the video for only the first 4 seconds but it doesn't restart to play the same 4 seconds again. It seems to run only once. How do I solve this?
I'm having trouble with adding autoplay to the video I want to put on my HTML site. Adding ?autoplay=1 or &autoplay=1 didn't work. -- same with the loop
<div class="videoContainer">
<iframe class="videoContainer__video" width="560" height="315" src="https://www.youtube.com/embed/HWl8XAOQnTg?rel=0&controls=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe>
</div>
Hello my friend you can find the correct steps to embed a youtube video correctly;
On a computer, go to the YouTube video that you want to embed.
Under the video, click Share .
Click Embed.
From the box that appears, copy the HTML code.
Paste the code into your blog or website HTML.
To allow your video to auto play use this src="https://www.youtube.com/embed/HWl8XAOQnTg?rel=0&controls=0&showinfo=0;autoplay=1&mute=1" as well as having allow="autoplay; encrypted-media" in your code. Use the steps above to embed your video through youtube first and then add the autoplay=1 to your video url.
I know you have said you have tried to add autoplay=1 already but it may help you to retry following my steps. Let me know how you get on.
Not relying on parameters that don't seem to work for me – working workaround for September 2018 (bonus: set width and height by CSS for #yt-wrap instead of hard-coding it in JS):
<div id="yt-wrap">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="ytplayer"></div>
</div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_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 onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
width: '100%',
height: '100%',
videoId: 'VIDEO_ID',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
player.mute(); // comment out if you don't want the auto played video muted
}
// 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.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.seekTo(0);
player.playVideo();
}
}
function stopVideo() {
player.stopVideo();
}
</script>
Here use this:
OPEN THE BELOW CODE PEN LINK
It will loop your video too : (Runs the cached version of video, look upon #Turnip Comment)
;&autoplay=1;&loop=1;&playlist=HWl8XAOQnTg
https://codepen.io/GAUTAMRAJU15/pen/MqLJRa
<iframe class="videoContainer__video" width="560" height="315" src="https://www.youtube.com/embed/HWl8XAOQnTg?rel=0&&showinfo=0;&autoplay=1;&loop=1;&playlist=HWl8XAOQnTg"> </iframe>
Autoplays and loops on mute, works for phones and all browsers in 2022. Not all my code just different bits I pirated from other smart people. Just put in your own video id
<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div class="iframe-container">
<div id="player"></div>
</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', {
width: '100%',
videoId: 'YOgtEDP5mlE',
playerVars: { 'autoplay': 1, 'playsinline': 1, 'rel': 0, 'loop': 1, 'autopause': 0 },
events: {
'onReady': onPlayerReady,
'onStateChange':onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.seekTo(0);
player.playVideo();
}
}
</script>
<style>
/* Make the youtube video responsive */
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
I am having trouble understanding their api.
First, not sure why havent they sticked to iframe embed method (and api appearance) for consistency like youtube and vimeo have been doing for years.
So after a lot of digging, I have this to change video source. I am still not sure if this is the best method to embed video?
When I use replaceWith the problem is that events ("play" in this example) are not heard any more.
//head
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var video;
window._wq = window._wq || [];
_wq.push({
id: '479268413a',
options: {
autoPlay:true
},
onReady: function(v) {
video = v;
video.bind("play", function(){
console.log("play");
})
}
});
$('#btn-next').on('click', function(){
video.replaceWith(
'5bbw8l7kl5', {
autoPlay:true
});
});
});
</script>
//body
<div class="wistia_embed wistia_async_479268413a"></div>
I'm late to this question, but If you are looking for method that doesn't require you to have all images loaded as suggested by Kiran, you can push your config again after your do replaceWith.
const applyConfig = (id) => {
window._wq = window._wq || [];
_wq.push({
id,
options: {
autoPlay:true
},
onReady: function(v) {
video = v;
v.bind("play", function(){
console.log("play");
})
}
});
}
$('#btn-next').on('click', function(){
video.replaceWith(id);
applyConfig(id);
});
What you should do is have all the videos on your page and then show and hide based on click event. (Note that the videos will come asynchronously from wistia. So no need to worry about performance here)
Please check the demo below.
$(".wistia-trigger").click(function(){
var vid = $(this).attr("data-video-id");
$(".wistia_embed").hide();
$(".wistia_embed.wistia_async_"+vid).show();
window._wq = window._wq || [];
// pause all videos and move time to zero
_wq.push({ id: "_all", onReady: function(video) {
video.pause();
video.time(0);
}});
// start playing current video
_wq.push({ id: vid, onReady: function(video) {
video.play();
}});
});
.wistia_embed {
display: none;
width: 200px;
height: 200px;
float: left;
}
.wistia-trigger {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_479268413a"></div>
<div class="wistia_embed wistia_async_5bbw8l7kl5"></div>
<button class="wistia-trigger" data-video-id="479268413a">
play 479268413a
</button>
<button class="wistia-trigger" data-video-id="5bbw8l7kl5">
play 5bbw8l7kl5
</button>
I wish to host some HTML5 videos in a HTML app. On opening the video they currently just open up within a page and play by default with the controls available with the option to open fullscreen, is there any way to get playing full screen as soon as you open the page?
<div class="video-container" data-tap-disable="true">
<div class="videotitle">{{product.title}}</div>
<div class="videoduration">Duration: {{product.duration}}</div>
<video id="myVideo" controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer"><source src="{{product.video}}" type="video/mp4"/></video>
Here is my Angular controller, I assume the JS code will fit in here somewhere as opposed to my product.html
.controller('ProductCtrl', function (Products, $rootScope, $scope, $stateParams, $state, $timeout) {
$scope.product = Products[$stateParams.productId];
var video = document.getElementById("myVideo");
// Stop video playing when we go to another page
$rootScope.$on('$stateChangeStart', function () {
stopVideo();
});
// Go to list of other videos when individual HTML5 video has finished playing
angular.element(video).bind('ended', function () {
$state.go('app.products');
});
function stopVideo() {
video.pause();
video.currentTime = 0;
}
});
const elem = document.getElementById("myVideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
var video = $("#myVideo");
video.on('click', function(e){
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});
I want to display youtube videos in iphone cordova app,
I tried iframe but it is not displaying some times.
So trying object tag
my code is
<div style="width: 100%; padding: 0" id="getWidth">
<object width="100%" height="auto">
<param name="movie" value="http://www.youtube.com/v/{{youtubeId}}">
<embed src="http://www.youtube.com/v/{{youtubeId}}" type="application/x-shockwave-flash" width="100%;" height="auto">
</object>
</div>
here getWidth is taking full screen but video is not showing in full width as shown in the following image
Note: left side safari inspector and right side iphone simulator
Image is taken while trying to set width dynamically but in both cases result is same
Refer to the Youtube Player API for how to embed it in your application. Iframe is by far the best way to go.
Here is a sample html from the API
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></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();
}
// 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>