Following embed code can play if chanel playing live video it can play live video.
https://www.youtube.com/embed/live_stream?channel=UCtOtzF5LuR0UIcKsKSG9_aw&autoplay=1
Problem is if that channel broadcasting multiple live how can get first live only?
examble channel
https://www.youtube.com/c/IDHAYAMTV
channel id: UCtOtzF5LuR0UIcKsKSG9_aw
that channel contain 15+ live stram but embed/live_stream picked only one ... how ? random? any filter?
Finally i fund answer myu self
$i = 0;
foreach ( $json['items'] as $item) {
$vid = $item['id']['videoId'];
echo '<iframe width="560" height="315" src="http://www.youtube.com/embed/'.$vid.'?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
if (++$i == 1) break;
}
Related
I'm trying to hide the "title" in my embed dailymotion video which is connected on the https://
Does anybody has a code solution...
The code I have is:
By the way, Dailymotion had change the "rel=0" from (related videos) to "queue=0" which is 100% working
but now I'm struggling with the title... Hope someone can help!
I think ui-start-screen-info is the parameter you are looking for.
Here is an example of how to use it with our Js SDK:
let player = DM.player(document.getElementById("player"), {
video: "x7xpiey",
params: {
'autoplay': false,
'queue-enable': false,
'ui-start-screen-info': false
}
});
or directly using an embed code:
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
<iframe style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden" frameborder="0" type="text/html" src="https://www.dailymotion.com/embed/video/x7xpiey?queue-enable=false&ui-start-screen-info=false" width="100%" height="100%" allow="autoplay" allowfullscreen></iframe>
</div>
You can find all the others parameters available on the player in the documentation
So I have a video that I need to autoplay. It works pretty well on Android(Chrome & FF) but iOS Safari does not seem to want to autoplay the video. Here is the code I am using (its a twig template) -
<video class="home-video" poster="{{paths.files}}{{record.templatefields.video_poster}}"
autoplay loop muted controls >
<source src="{{paths.files}}{{record.templatefields.video}}" type="video/mp4" />
<source src="{{paths.files}}{{record.templatefields.video_ogg}}" type="video/ogg" />
</video>
I have already read https://webkit.org/blog/6784/new-video-policies-for-ios
I have ensure the video does not have any audio track so it should not be a problem. The device is using iOS 10+
Any clues would be greatly appreciated..
Add the 'playsinline' attribute. Also ensure no other elements are on top of it.
Add playsinline attribute.
If your video is out of viewport or behind other elements, use javascript play() shortly after pageload, this may help (as long as other needed attributes are set).
Using jQuery (extracted from my bigger jQuery plugin):
var start_video = function($target){
var video_width = $target.width();
var video_height = $target.height();
// if not loaded yet, wait another 500ms
if ($target.get(0).readyState < 2 || video_width == 0 || video_height == 0){
setTimeout(function(){
start_video($target);
}, 500);
return;
}
$target.get(0).play();
}
$(document).ready(function() {
start_video($('.home-video'));
}
I apologize up front as I'm very confused by my problem. I'm really in a bind because this is causing a problem on my production site.
I have a javascript player on my site which plays through song lists which can be hosted on youtube, soundcloud or vimeo. Yesterday I noticed this error which generally arises anytime you try to load a new song through "skipping" with the player buttons. This error just started in the last day or two. I am not seeing anything new in the youtube api release notes and this error occurs using Chrome, Firefox and Safari, so it is most likely not related to a change in the browser. Something that I am using has changed though, as I have not pushed new code in 18 days.
An example playlist is here: http://www.muusical.com/playlists/programming-music
I think I have isolated the way to reproduce the error, here are the steps:
Play a youtube hosted song.
Skip to any other song in the list (whether by pressing the skip buttons or directly pressing the play button on the song's row item).
*Note, that if the first song in the playlist is a youtube song, simply skipping to another song even without playing the initially loaded youtube song will produce the error.
Essentially, the error seems to occur once you have loaded and/or played a youtube song and attempt to skip to another song.
Let me know if you find an exception to this behavior.
I see this error in the console:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.muusical.com') does not match the recipient window's origin ('http://www.muusical.com').
I load the player with using the youtube javascript api:
new YT.Player('playlist-player', {
playerVars: { 'autoplay': 1, 'fs': 0 },
videoId: "gJ6APKIjFQY",
events: {
'onReady': #initPlayerControls,
'onStateChange': #onPlayerStateChange
}
})
Which produces this iframe:
<iframe id="playlist-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/gJ6APKIjFQY?autoplay=1&enablejsapi=1&origin=http%3A%2F%2Fwww.muusical.com"></iframe>
After hitting skip from the above youtube song, this is what I see loaded in the iframe:
<iframe id="playlist-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src=""></iframe>
I support youtube, soundcloud and vimeo songs. It seems like once a youtube song is loaded the "origin" changes from http to https. I don't think it is necessary to include the embedding methods for the other hosts as this error occurs even if the entire playlist is only youtube and it does not occur in a playlist which consists of only songs from soundcloud and vimeo.
Also, this is how I am loading the youtube javascript:
// Load 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);
Please let me know if you need me to clarify anything and thanks in advance for taking a look.
I have read a bit about this, some SO posts here and there and this link too : https://code.google.com/p/gdata-issues/issues/detail?id=5788
I was about to add a comment to your question, saying I was getting crazy over this ... but when I started to describe my setup, I found a way to avoid the issue ^^.
I start with an empty div element, and use the Youtube Iframe API to turn it into an iframe with all the necessary options.
I have multiple divs like this one, and usually use the same JS variable to store all those players, but one at a time (one replaces the other, and so on ... - it could be better, I know).
To fix the issue, I had the idea to destroy the player with youtubePlayer.destroy(); before building a new one from another element. No more JS errors bleeding in my Chrome console :).
Hope it helps, all the litterature I could read about http and https did not apply to my case, because I am not setting the iframe URL myself, and my website happens to be not https ...
I did restore an async call instead of a static script tag in my HTML but I do not think this was necessary.
EDIT : this error message is quite misleading in fact, it only vaguely means : you are not using the youtube API the proper way :)
#sodawillow's answer is partially correct but I'd like to give the details to the solution and what caused my code to stop calling the .destroy() method to remove the youtube player.
My site has a player which swaps out songs from various sites, one of them being Youtube. There can be different methods for removing a player depending on the type it is. My code checks for the existence of a youtube player and if passes the check then it uses the .destroy() method which only the youtube player has. The problem is that YouTube changed the names of some of the static variables on their player object. For example, if I created a player via:
var player = new YT.Player('playlist-player', {
playerVars: { 'autoplay': 1, 'fs': 0 },
videoId: "gJ6APKIjFQY",
events: {
}
})
then there would be a variable player.L which held the string "player". So to check if the current player was a YouTube player and remove it I did this:
if (player.L == "player") {
player.destroy();
} else {
//handle the removal of the Soundcloud or Vimeo player.
}
Sometime recently Youtube changed the location of the string "player" to now reside at player.M. I could change the above code to check player.M instead of player.L and that would work but to try to avoid this issue in the future I instead have implemented:
if (player.destroy) {
player.destroy();
} else {
//handle the removal of the Soundcloud or Vimeo player.
}
As long as Youtube does not remove the .destroy() method unannounced this will not cause any issues.
So in summary, the issue was as #sodawillow guessed, I was not using the .destroy() method to remove the Youtube player. The reason was because Youtube made some unannounced changes to their api, changing the location of some of the static variables.
This error belongs to the Google Youtube API.
Inside "https://www.youtube.com/iframe_api":
if (!window['YT']) {
var YT = {loading: 0, loaded: 0};
}
if (!window['YTConfig']) {
var YTConfig = {'host': 'http://www.youtube.com'};
}
They use http instead of https.
We need to override the 'host' option and 'widget_referrer' same as 'origin'.
player = new YT.Player('player', {
host: 'https://www.youtube.com',
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE'
...
origin: "https://www.enziin.com",
widget_referrer: "https://www.enziin.com"
}
Goodluck.
My solution is to write all the Youtube player logic in a separate page (as blank as posible) , and that page be referenced in an IFRAME tag.
<iframe src="/youtube_frame/?data=SOME_DATA -%>" height="400px" width="100%" frameborder="0" border="0" scrolling="no"></iframe>
Then, your youtube_frame.html will be something like this:
<!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) {
console.log("OnplayerStateChange");
if (event.data == YT.PlayerState.PLAYING && !done) {
console.log("OnplayerStateChange - If statement");
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
(As a marginal note: my context is that Prototype.js interferes with the event 'OnStateChange', and we cannot remove this dependency.
Using a jsfiddle would not be useful to reproduce the issue, as it has few dependencies.
My app here is built in Rails, and using this plugin for showing a Video playlist: https://github.com/Giorgio003/Youtube-TV/)
I am having issues displaying closed caption on youtube videos using the iframe player.
Here's the code I am using:
<!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.
function onPlayerStateChange(event) {
event.target.loadModule('captions');
}
</script>
</body>
</html>
Here's a gist https://gist.github.com/khirakawa/0a81b3039a85b9875b59
This is basically the same sample code that's on the API reference page, https://developers.google.com/youtube/iframe_api_reference. I call event.target.loadModule('captions'); on a player state change event.
I could not find any documentation on their API reference page about loading caption modules, but I did find the code to load the caption module in this ticket https://code.google.com/p/gdata-issues/issues/detail?id=444
I tried this on both Safari and Chrome with no luck.
The local storage values I see when youtube is opened is:
yt-remote-connected-devices {"data":"[]","expiration":1412291704974,"creation":1412205304974}
yt-remote-device-id {"data":"27238aac-9452-4ae8-9b9f-1e29278e4d3b","expiration":1443741293991,"creation":1412205293992}
yt-remote-load-account-screens {"data":"false","expiration":1443741304972,"creation":1412205304972}
yt-remote-online-screens {"data":"[]","expiration":1412205364973,"creation":1412205304973}
Notice that its missing entries for captions (I can't recall what the key values were, but I know there were two of them. One to enable captions and the other for caption settings).
The demo page (https://developers.google.com/youtube/youtube_player_demo) shows closed captions if you check cc_load_policy, but that's only an AS3 option.
This was working on October 6th, but I cannot get it to work anymore. I'm not sure if the youtube script itself changed.
I tried moving event.target.loadModule('captions'); to the onPlayerReady handler, but that didn't work either.
Any help would be greatly appreciated.
I was able to load captions by setting cc_load_policy to 1. I also realized that the sample video on the youtube site defaulting to using <embed> (read: Flash), instead of using the html5 video player.
I am not certain when the iframe player decides to use over , but I did find a video that does use the html5 video tag. Even so, I had to set cc_load_policy to 1 in order for it to work. Neither loadModule nor unloadModule works anymore.
I hope this helps anyone else who ran into this issue.
Is there any way to embed google drive video without using iframes?
Just like you can do with youtube video:
<object width="320" height="180">
<param name="movie" value="http://www.youtube.com/v/UHk6wFNDA5s&showinfo=0">
<param name="wmode" value="transparent">
<embed src="http://www.youtube.com/v/UHk6wFNDA5s&showinfo=0" type="application/x-shockwave-flash" wmode="transparent" width="320" height="180">
</object>
The suggested embed code from google docs (using iframe) is:
<iframe src="https://docs.google.com/file/d/0B7CQ5XvLuIGrQlJUNUhpQVltZ0U/preview" width="640" height="385"></iframe>
It's possible but not officially supported.
After some study of the result generated by the iframe embed from Google Drive and the iframe from YouTube I've digged into the YouTube JS Player API and found out that it's possible using SWFObject embed
Here is the code that I use to add the player object:
function YT_createPlayer(divId, videoId) {
var params = {
allowScriptAccess: "always"
};
var atts = {
id: videoId
};
//Build the player URL SIMILAR to the one specified by the YouTube JS Player API
var videoURL = '';
videoURL += 'https://video.google.com/get_player?wmode=opaque&ps=docs&partnerid=30'; //Basic URL to the Player
videoURL += '&docid=' + videoId; //Specify the fileID ofthe file to show
videoURL += '&enablejsapi=1'; //Enable Youtube Js API to interact with the video editor
videoURL += '&playerapiid=' + videoId; //Give the video player the same name as the video for future reference
videoURL += '&cc_load_policy=0'; //No caption on this video (not supported for Google Drive Videos)
swfobject.embedSWF(videoURL,divId, widthVideo, heightVideo, "8", null, null, null, null);
}
You need to fetch the fileId from Google Drive some how (JS or server side, you can use a GAS Servlet if you want to host the site on Google Drive).
Most of the YouTube Player Parameters works, and events to control the playing status from JS are fired; so basically anything from the Youtube Documentation works.
Do you mean like this:
<object width="420" height="315" data="https://docs.google.com/file/d/0B7CQ5XvLuIGrQlJUNUhpQVltZ0U/preview">
<embed width="420" height="315" src="https://docs.google.com/file/d/0B7CQ5XvLuIGrQlJUNUhpQVltZ0U/preview">
I have tested the code and it works.
I used the example code from W3Schools, but cannot paste the code here as it is their copyright, just follow the link to see it.
The second part is to get the link to the images correct. I found using the link directly from Drive didn't work, so I created a new page in my site and added all the images I wanted. I disabled the page from navigation so it wouldn't be found unless they use search. After publishing, I opened the page and used Inspect on the browser to find the tag for each image. I then copied the element which looked like this.
<img src="https://lh3.googleusercontent.com/qt ... 4jM=w1175" class="CENy8b" role="img" style="width: 100%; margin: 0%">
I added the title attribute to this, so it is possible to see which images are included. I also removed the class="CENy8b" attribute as it doesn't seem to be required.
<img src="https://lh3.googleusercontent.com/qt ... 4jM=w1175" role="img" style="width: 100%; margin: 0%" title = "image 1">
I then pasted this over the tag in the code from W3Schools, repeating for each of the images. The W3Schools code has a where they have dots under the images to show which image from the set is being displayed. The number of dots needs to match the number of images.
Having done all the above I copied the code from the editor and used Embed code on Sites to paste it in. You can see the images ticking over in the Sites editor and after publishing it works fine on the live page.
The W3Schools code uses a 2 s delay between images. It is fairly easy to find where this is set in the code to change it to an appropriate value for your site.