Fancybox youtube - youtube

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
}
});

Related

How to embed all the Youtube channel-videos into website..?

I work on a site, I want to embed all the Youtube-channel-videos into my site.
I found similar post like this code that acutally worked fine and loaded all videos as desired for some time, but yesterday I saw that the channel-video-list didnt load, displaying only one video. What have happend? Has Youtube made any updates lately so the channel-videos wont load?
<iframe src="http://www.youtube.com/embed/?listType=user_uploads&list=FeetMinistries" width="100%" height="800"></iframe>
Thanks for all the help I can get.
André
you could try
Embed a video
On a computer, go to the YouTube video you want to embed.
Under the video, click SHARE Share.
Click Embed.
From the box that appears, copy the HTML code.
Paste the code into your blog or website HTML.
Embed a playlist
Sign in to your YouTube account on a computer.
On the left side of the page, select the playlist you want to embed.
Copy the playlist ID from the URL.
Modify the embed code for an individual video by doing the following:
In the place of the video ID (after "embed/"), substitute
"videoseries?list=".
Then paste the playlist ID after the "=".
Paste the code into your blog or website HTML.
https://support.google.com/youtube/answer/171780?hl=en
Consider following JQuery code snippet I'm usually using to dynamically load channel by channel Id.
$.ajax({
url: "https://www.googleapis.com/youtube/v3/playlists",
type: 'get',
dataType: 'json',
data: {
part : 'snippet',
channelId: <channel_id>,
maxResults : 50,
key: '<API Key>',
},
success: function(data) {
}
});

dailymotion api mobile website issues

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 !

how to embed youtube video using jwplayer without youtube page

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

Embed youtube comments and like

I was wondering if it's possible to embed youtube videos' comments and like button with the video?
If there is such thing, how can I do that or where can I get more info? Thanks
Here you can see an example of how to get and display the video comments
Getting Youtube Video Information using javascript/jquery
and in the Topic Explorer project you can see how to add a 'like' or add the video to your favorites:
https://code.google.com/p/yt-topic-explorer/source/browse/app/views/main.html
<button ng-click="addToList($event.target, 'likes', videoResult.id)">{{'LIKE'|i18n}}</button>
<button ng-click="addToList($event.target, 'favorites', videoResult.id)">{{'FAVORITE'|i18n}}</button>
and in:
https://code.google.com/p/yt-topic-explorer/source/browse/app/scripts/controllers/main.js
$scope.addToList = function(target, listName, videoId) {
var listId = $rootScope.relatedPlaylists[listName];
target.textContent = topicExplorerApp.filter.i18n('ADDING');
target.disabled = true;
youtube({
method: 'POST',
service: 'playlistItems',
params: {
part: 'snippet'
},
body: {
snippet: {
playlistId: listId,
resourceId: {
kind: constants.VIDEO_KIND,
videoId: videoId
}
}
},
callback: function(results) {
if ('error' in results) {
target.textContent = 'Error';
} else {
target.textContent = topicExplorerApp.filter.i18n('ADDED');
}
}
});
};
YouTube does not have any embed code that you can use to embed comments. So basically there are 2 options to embed comments -
1. Use the YouTube API to embed and post comments. This will need a good coding knowledge.
To get comments use this endpoint
GET https://www.googleapis.com/youtube/v3/commentThreads
To add comments use this endpoint
POST https://www.googleapis.com/youtube/v3/playlistItems
2. Or you can use a ready-made plugin that allows this functionality. Here is a small demo of the Youmax plugin that will list comments as well as allow you to add comments.
EDITED: On Feb,2016 YT has stopped the solution bellow from working :-( I'll keep it here just for reference
FOR THE COMMENTS:
As YT has deprecated the gdata for the comments url, you can scrape 'em also from here; its a workaround though :D
https://www.youtube.com/all_comments?v=cOIKAnF3mjs
...no authentication needed! :) and if you want to work the client side only (in this example by cross-domain), go through JS
<textarea style="width:100%;height:100%" id=cu></textarea>
<script>
var r='';
function c(d)
{
for(i=0;i<=d.query.count-1;i++)
r=r+d.results[i];
document.getElementById('cu').innerHTML=r;
}
</script>
<script src="http://query.yahooapis.com/v1/public/yql?q=%20SELECT%20*%20FROM%20html%20WHERE%20url%3D%22https://www.youtube.com/all_comments?v=cOIKAnF3mjs%22&callback=c"></script>
You can Access YouTube Comments by processing this URL
http://gdata.youtube.com/feeds/api/videos/{$videoID}/comments
The YouTube like functionality requires the user to be logged-in to his/hers Google account

Changing songs on jPlayer by clicking a link, hosted on Amazon S3

Hello all and thanks for any help in advance.
I have a ruby on rails application in which I am attempting to stream audio through jPlayer, which is hosted on S3. So far I have no problem uploading files or using the browsers built in player to play audio files, or even getting jPlayer to initialize with a song that is on S3. The issue comes when I get into changing songs.
I initialize jPlayer like this:
$('a.html5').click(function() {
var url = $(this).attr('href');
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
mp3: url
});
},
swfPath: "javascripts",
supplied: "mp3",
wmode: "window"
});
return false;
});
where the mp3: url points to the S3 URL (this all works just fine).
This allows me to select a song from a list of links, and it loads up and starts playing no problem.
The issue is that when I try to change songs, I get an access-control-allow-origin error. So I tried the following:
$('a.html5').click(function() {
var url = $(this).attr('href');
$("#jquery_jplayer_1").jPlayer("setMedia", mp3: url).jPlayer("play");
return false;
});
This still gives me an access-control-allow-origin error. I have been pounding my head against the wall for hours trying to figure this out and nothing.
So basically a summary is that I can initialize jPlayer and play a song just fine, but when I want to go change a song, access-control-allow-origin errors ruin my day.
Any ideas?
Well it appears that the only issue was a lack of brackets around the mp3: url part of jPlayer("setMedia"....
so it should have been (...).jPlayer("setMedia", {mp3: url}).(...)
After Searching a lot it could be one of the solutions too.
function songs(json1) {
$("#jquery_jplayer_1").jPlayer("destroy"); //this will destroy previous jplayer content and then if you again call this function it will add the new url of you audio song to the jplayer
var audio_url_inside = json1.audio_url;
$('#jquery_jplayer_1').jPlayer({
ready:function (event) {
$(this).jPlayer("setMedia", {
mp3:audio_url_inside,
oga:audio_url_inside
}).jPlayer("play"); //attemp to play media
},
swfPath:"http://www.jplayer.org/2.1.0/js",
supplied:"mp3, oga"
});
}
:Hope it will help.

Resources