I'm using Youtube iframe API to add a video to my page, but it's showing related videos when the video is about to end even though i have set the 'rel' parameter to 0.
Here is the concerned part of my code:
function onYouTubeIframeAPIReady() {
player = new YT.Player('homeplayer', {
height: '1070',
width: '1920',
videoId: videoID,
playerVars: {
'controls': 0,
'loop': 1,
'modestbranding': 1,
'rel': 0,
'showinfo': 0,
'playlist': videoID
},
events: {
'onReady': onPlayerReady
}
});
}
Maybe this question has already been asked but i can't find a solution as youtube api has been updated multiple times.
The functionality of the rel parameter has changed; in August of 2018, YouTube deprecated it and in September of 2018 they modified the player API so you can no longer hide related videos. Rather, if you set rel to 0, the embedded player will only show related videos from the channel that the just-played video is from. If you omit rel, then the embedded player will show related videos from anywhere on YouTube. There is no longer any way to remove related videos altogether.
See https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018 for more details.
Related
Has YouTube started locking down cross origin requests?
I am using a fullscreen autoplay hero video on my website and it has been functioning correctly for a long time. Within the last couple weeks it stopped working and I have the following error in the logs.
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://tbrogames.github.io').
Per the answer on this question
I tried changing the host between http and https to see if that would fix it and it didn't.
My website that throws the error: https://tbrogames.github.io/
I was able to find a bigger games website that also has this exact issue.
https://playbattlegrounds.com/main.pu
They are also using a youtube video as the hero/splash video; and it no longer functions, throwing the same error.
The relevant javascript can be found here
https://github.com/tbrogames/tbrogames.github.io/blob/master/js/defer.js
However, this was working for a long time and I didn't change any of the code. Which is why I'm thinking that it is a change that YouTube has made.
I think that error is actually misleading. I had the same issue, but I believe that it is actually chrome that is no longer autoplaying the hero. I get this error: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
The fix for me was calling mute on the video in Javascript Before playing the video. The iframe version of the embed with the same properties would not autoplay
<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('ythero', {
videoId: '3FjTef9gn3Q',
height: '100%',
width: '100%',
playerVars: {
rel: 0,
controls: 0,
showinfo: 0,
autoplay: 1,
loop: 1,
playlist: '3FjTef9gn3Q',
modestbranding: 1
},
events: {
'onReady': onPlayerReady,
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
</script>
YouTube does allow it. Make sure you are loading from a URL such as:
https://www.youtube.com/embed/HIbAz29L-FA?modestbranding=1&playsinline=0&showinfo=0&enablejsapi=1&origin=https%3A%2F%2Fintercoin.org&widgetid=1
Note the "origin" component, as well as "enablejsapi=1". The origin must match what your domain is, and then it will be whitelisted and work.
I am trying to play embed videos in my webpage, in desktop browser there is no problem, but in mobile version I have these issues:
Video wont start automaticaly
There is Dailymotion logo in right bottom corner
I am using DM object provided by file https://api.dmcdn.net/all.js.
Code:
<script src="https://api.dmcdn.net/all.js"></script>
<script>
DM.init({
apiKey: 'correct api key',
status: true, // check login status
cookie: true // enable cookies to allow the server to access the session
});
</script>
<div id="player{$img->getId()}" class="dailymotion tile"></div>
<script>
$(function () {
var player{$img->getId()} = DM.player(document.getElementById("player{$img->getId()}"), {
{var DMurl = explode("/", $img->getImgUrl())}
video: {$DMurl[count($DMurl) - 1]},
width: "100%",
height: "100%",
params: {
autoplay: true,
mute: true,
endscreen-enable: false,
ui-logo: true,
controls: false
}
});
player{$img->getId()}.play();
});
</script>
My problem might be caused by syntax error in params (endscreen-enable and ui-logo, phpstorm is showing syntax error because of '-' char)
Video wont start automatically
=> this is normal on mobile devices, it will be the same for any video you add, from any provider. The reason is that most mobile devices prevent videos from being played automatically, hence the play must be triggered by a user interaction. This is detailed on Dailymotion developer website at : https://developer.dailymotion.com/player/faq#player-faq-autoplay-does-not-work-on-mobile
There is Dailymotion logo in right bottom corner
=> you pass ui-logo: true so this is normal !
i have problem with jwplayer
problem if i open video at my script from phone it show youtube video page
how to hide this page and show only my page
my code for jwplayer
<script type="text/javascript">
jwplayer("container").setup({
file:"{$file_url}",
image: "{$file_image}",
autostart: "false",
aboutlink:"http://elfnoon.com",
abouttext:"elfnoon.CoM Player",
allowscriptaccess:"always",
height: {$height},
width: {$width},
logo: {
file: '{$siteurl}/player/logo.png',
link: '{$siteurl}',
position: 'bottom.right',
hide: 'false',
margin: '-35',
linktarget: '_blank',
hide: 'false',
over: '10',
out: '0.75'
},
wmode:"opaque",
volume:"100",
icons:"true",
bufferlength:"900",
related: {
file: '{$siteurl}/jw6-related.xml',
onclick: 'link'
},
modes:[
{ type:'html5' }
]
});
</script>
test link
with open page from cumputer it show my script normaly
but if from phone it show youtube page
same friends tell me use api but the script for public videos so not know how to make api for my site to embed video using my player with my settings
i forget , how i test my player using html5 because it show only swf version :(
same help plz?
If you use JW6, this should work - http://support.jwplayer.com/customer/portal/articles/1406725-youtube-video-embed
I've been trying to get the view count on videos that I query through the following method:
function search() {
var request = gapi.client.youtube.search.list({
part: 'snippet',
channelId: 'IRRELEVANT',
order: 'date',
maxResults: '25'
});
request.execute(function(response){
YoutubeResponse(response);
});
While the documentation tells me that there's a statistics portion to every video, after the snippet I have __proto__ which I guess means there was an error somewhere? or did the API change? Essentially I need the view count of those 25 most recent videos...
I tried changing part: 'snippet' to part: 'statistics' but got back a code: -32602...
Thanks for the help,
Cheers!
EDIT: Apparently the search.list doesn't have the "statistics" but rather I need to search every video individually... The thing is, when using googles "Try It" feature (https://developers.google.com/youtube/v3/docs/videos/list#try-it) when you ask for the statistics in the "Fields" part at the bottom, it doesn't do anything... So I am VERY confused as to how the heck can I get the view counts & length of all 25 videos (if individually or all at once - preferably-)
The link you gave https://developers.google.com/youtube/v3/docs/videos/list#try-it is working for me.
To get duration and viewCount: Fill in for part: contentDetails,statistics and for id: a comma-separated-list of video-id's like: TruIq5IxuiU,-VoFbH8jTzE,RPNDXrAvAMg,gmQmYc9-zcg
This will create a request as:
GET https://www.googleapis.com/youtube/v3/videos?part=contentDetails,statistics&id=TruIq5IxuiU,-VoFbH8jTzE,RPNDXrAvAMg,gmQmYc9-zcg&key={YOUR_API_KEY}
Agree with the answer provided by #Als.
But I found a code snippet which might be more convenient for some of you:
function youtube_view_count_shortcode($params)
{
$videoID = $params['id']; // view id here
$json = file_get_contents("https://www.googleapis.com/youtube/v3/videos?
part=statistics&id=" . $videoID . "&key=xxxxxxxxxxxxxxxxxxxxxxxx");
$jsonData = json_decode($json);
$views = $jsonData->items[0]->statistics->viewCount;
return number_format($views);
}
Replace the key value with the google api key for youtube data API and the video id with the youtube video id and Voila you get the total number of views for the youtube video.
Source: https://www.codementor.io/rajharajesuwari/how-to-get-youtube-views-count-aftojpxhj
I am trying to get a fancybox YouTube video to start about 12 minutes into a video. Can someone help me with achieving this? No matter what I have tried, since I am a novice, I cannot get the video to start where I want it to.
I assume that you have already managed to display the video in fancybox and you just you want to select the start time at 12 minutes, don't you?
If so, in the URL of the youtube video just add at the end #t=12m00s (time in minutes and seconds) like
http://www.youtube.com/watch?v=JaFVr_cJJIY#t=12m00s
you could also use this format
http://www.youtube.com/v/JaFVr_cJJIY&autoplay=1#t=12m00s
If you're using the latest version of Fancybox (2+), YouTube and Vimeo are now recognized and handled quite well.
However, it took some digging around to find this out since most documentation is on Fancybox 1.
Fancybox strips your YouTube URL and adds some default parameters:
autoplay=1 (videos will autoplay)
autohide=1 (control will hide once video is playing)
fs=1 (fullscreen is enabled)
rel=0 (related videos are hidden)
hd=1 (HD playback is enabled)
wmode=opaque (fixes z-index with YouTube and lightboxes)
enablejsapi=1 (enables Javascript API)
What this means that normally you could pass those parameters in your URL and have them apply, but Fancybox 2 ignores those and falls back on the preset values.
Don't dismay! You can override those in your script. Several ways.
Normal media embed:
$(".fancybox").fancybox({
helpers : {
media: true
}
});
Custom URL parameters method 1:
$(".fancybox").fancybox({
helpers : {
media: {
youtube : {
params : {
autoplay : 0
}
}
}
}
});
Custom URL parameters method 2:
$(".fancybox").fancybox({,
helpers : {
media: true
},
youtube : {
autoplay: 0
}
});
For your issue, you want to pass in this parameter:
$(".fancybox").fancybox({,
helpers : {
media: true
},
youtube : {
start: 720
}
});