asked on

fancybox into a youtube channel feed

Hi,

I have a website where I am pulling a youtube channel in and displaying the thumbnails.

I would like to use fancy box to play the videos but can't get it to display properly. I keep getting a 404 inside the iframe.

Any ideas? You can see the example at http://thelocalized.com/fancybox2/
and I have attached the code for better clarification.

Thanks!
index.html

Gary

Never done fancybox with youtube but you are targeting the container div only instead of the individual elements

And fancybox usually works off an anchor tag

smfmetro10

ASKER

thanks for the reply GaryC123!

Can you point me in the right direction with using fancybox and individual elements.

I have never worked with fancybox before.

Thanks!

Gary

<style>
#youtube_links a{
display:block;
width:100%;
height:100%
}
</style>

<ul id="youtube_links">
<li>
<a href="http://youtube.com/link"><img src=""></a>
</li>
</ul>

<script type="text/javascript">
jQuery(document).ready(function() {

$("#youtube_links a").click(function() {
	$.fancybox({
		'padding'		: 0,
		'autoScale'		: false,
		'transitionIn'	: 'none',
		'transitionOut'	: 'none',
		'title			: this.title,
		'width'			: 640,
		'height'		: 385,
		'href			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
		'type'			: 'swf',
		'swf'			: {
		'wmode'				: 'transparent',
		'allowfullscreen'	: 'true'
		}
	});

	return false;
});
});
</script>

Open in new window

smfmetro10

ASKER

I'm still confused about how you pull in the channel then be able to click on the individual thumbnail.

If the youtube channel is :http://www.youtube.com/channel/UCqM5P-etZ4gJ5hnTf0iTLiQ/videos

Do you put that in the src, or href?

Thanks!

Gary

Attached is sample code (you just need to set the path to the fancybox js and css and check the name is correct)
Basically you just need to repeat the li/a for each video.
fancybox.html

smfmetro10

ASKER

Thank you so much for the help!

My problem is with the hard coding of the individual files and thumbnails.

This is the little snippet of code that goes out and gets all the thumbnails :

<script
type="text/javascript"
src="http://gdata.youtube.com/feeds/users/doctorscompany/uploads?alt=json-in-script&callback=showMyVideos2&max-results=50">
</script>

So is there a way that you don't have to put each individual href and src in the <li> ?

The point of this little project was to scrape the youtube channel so that every time a new video gets uploaded on youtube it automatically gets updated on this website.

Is that even possible with fancybox?

Thank you so much for the help!!

Gary

It is, I would need to see the code that is creating the thumbs/links.

smfmetro10

ASKER

Is this the code that is generating the thumbs?

<script
type="text/javascript"
src="http://gdata.youtube.com/feeds/users/doctorscompany/uploads?alt=json-in-script&callback=showMyVideos2&max-results=50">
</script>

Here is the entire page I have as well

Thanks you so much!!
fancyboxCopy.html

Gary

Try this, haven't tested so may need some tweaking

<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="jquery.fancybox-1.3.4.css" />

  <link rel="stylesheet" href="css/fancybox/jquery.fancybox-buttons.css">
        <link rel="stylesheet" href="css/fancybox/jquery.fancybox-thumbs.css">
        <link rel="stylesheet" href="css/fancybox/jquery.fancybox.css">
<head>
<title>My Videos</title>
<style>
.titlec {
  font-size: small;
}
ul.videos li {
  float: left;
  width: 10em;
  margin-bottom: 1em;
}
ul.videos
{
  margin-bottom: 1em;
  padding-left : 0em;
  margin-left: 0em;
  list-style: none;
}
#videos2 a {
display:block
}
</style>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
function showMyVideos2(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul class="videos">'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t.substr(0, 20);
    var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
    var playerUrl = entries[i].media$group.media$content[0].url;
    html.push('<li><a href="',playerUrl,'">',
              '<span class="titlec">', title, '...</span><br /><img src="', 
              thumbnailUrl, '" width="130" height="97"/></a></li>');
  }
  html.push('</ul><br style="clear: left;"/>');
  document.getElementById('videos2').innerHTML = html.join('');
  if (entries.length > 0) {
    loadVideo(entries[0].media$group.media$content[0].url, false);
  }
}
</script>
</head>
<body><!--
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
    <object id="player"></object>
</div>-->
<div id="videos2">
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/users/doctorscompany/uploads?alt=json-in-script&callback=showMyVideos2&max-results=50">
</script>

</div>
<script type="text/javascript">
jQuery(document).ready(function() {

$("#videos2").on("click","a",function() {
	$.fancybox({
		'padding'		: 0,
		'autoScale'		: false,
		'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'title			: this.title,
		'width'			: 640,
		'height'		: 385,
		'href			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
		'type'			: 'swf',
		'swf'			: {
		'wmode'			: 'transparent',
		'allowfullscreen'	: 'true'
		}
	});

	return false;
});
});
</script> 
</body>
</html>

Open in new window

smfmetro10

ASKER

its close!

when you click a thumbnail it brings up a full screen player ( there is no transition and no overlay).

The weird thing is this piece of code is not getting executed:

<script type="text/javascript">
jQuery(document).ready(function() {

$("#videos2 a").on("click","a",function() {

      $.fancybox({
            'padding'            : 0,
            'autoScale'            : false,
            'transitionIn'            : 'elastic',
            'transitionOut'            : 'fade',
            'speedIn' : 600,
'speedOut' : 200,
            'title'                  : this.title,
            'width'                  : 640,
            'height'            : 385,
            'href'                  : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'                  : 'swf',
            'swf'                  : {
            'wmode'                  : 'transparent',
            'allowfullscreen'      : false,
            'overlayShow': true
            }
      });

      return false;
});
});
</script>

I can take it out and the webpage will still bring up the video if you click on the thumbnail.

I have tried for hours now why this is not being called.

You have suggestions?

Thanks!!

Gary

That script block needs to be after the jquery/fancybox script

Gary

Actually I see that page is not the code I posted above, can you update the link.

smfmetro10

ASKER

Oh yeah- sorry about that. I wanted to start over ( i was going down a crazy rabbit hole ) :)

http://thelocalized.com/fancybox2/fancyboxtest.html

Gary

Remove this
if (entries.length > 0) {
loadVideo(entries[0].media$group.media$content[0].url, false);
}

And change
$("#videos2 a").on("click","a",function() {

to
$("#videos2").on("click","a",function() {

Gary

Additionally look at
-ms-text-overflow:ellipsis
and
text-overflow:ellipses

Saves you having to code the ... to your titles.

smfmetro10

ASKER

Thanks for the ellipses...

I adjusted the code but the page is still not bringing up the fancybox transition.

It just brings up a full page player

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

smfmetro10

ASKER

Thank you so much for the help!!