Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 344
  • Last Modified:

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
0
smfmetro10
Asked:
smfmetro10
  • 10
  • 8
1 Solution
 
GaryCommented:
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
0
 
smfmetro10Author Commented:
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!
0
 
GaryCommented:
<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

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
smfmetro10Author Commented:
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!
0
 
GaryCommented:
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
0
 
smfmetro10Author Commented:
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!!
0
 
GaryCommented:
It is, I would need to see the code that is creating the thumbs/links.
0
 
smfmetro10Author Commented:
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
0
 
GaryCommented:
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

0
 
smfmetro10Author Commented:
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!!
0
 
GaryCommented:
That script block needs to be after the jquery/fancybox script
0
 
GaryCommented:
Actually I see that page is not the code I posted above, can you update the link.
0
 
smfmetro10Author Commented:
Oh yeah- sorry about that. I wanted to start over ( i was going down a crazy rabbit hole ) :)

http://thelocalized.com/fancybox2/fancyboxtest.html
0
 
GaryCommented:
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() {
0
 
GaryCommented:
Additionally look at
-ms-text-overflow:ellipsis
and
text-overflow:ellipses

Saves you having to code the ... to your titles.
0
 
smfmetro10Author Commented:
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
0
 
GaryCommented:
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.js">
Should be
<script src="js/fancybox/jquery.fancybox.js"></script>

took me 30 mins to see it... :o)
0
 
smfmetro10Author Commented:
Thank you so much for the help!!
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 10
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now