Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member Ruaille's Avatar
    Join Date
    Jun 2012
    Location
    Ireland
    Posts
    3
    Member #
    32078
    This is my first post on this forum, so hello!

    I've got a problem with a project I'm doing at the moment, I'm trying to build a YouTube feed for a website and I'm a little stuck. I followed this guide:

    But the guide doesn't cover the CSS attributes.

    This is my HTML file: index.html

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>YouTube</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
    <script type="text/javascript">
    
        var numbers = [2, 1, 3];
        var currentNumber = 0;
    
        $(document).ready(function()
        {
            $.get('videos.php', { channel: 'USERNAME', video_limit: 3}, function(data)
            {
                $('#videos').html(data);
    
                $('.thumbnail').each(function(index)
                {
                    var video_id = $(this).attr('videoid');
                    var url = 'url(http://img.youtube.com/vi/'+video_id+'/'+numbers[0]+'.jpg)';
                    $(this).css('background-image', url);
                });
    
                setInterval("changeVidyaPics()", 5000);
            });
        });
    
        function changeVidyaPics()
        {
            currentNumber++;
            if(currentNumber >= numbers.length) currentNumber = 0;
    
            $('.thumbnail').each(function(index)
            {
                $(this).fadeOut(500, function()
                {
                    var video_id = $(this).attr('videoid');
                    var url = 'url(http://img.youtube.com/vi/'+video_id+'/'+numbers[currentNumber]+'.jpg)';
                    $(this).css('background-image', url);
                    $(this).fadeIn(500);
                });
            });
        }
        </script>
    </head>
    
    <body>
    
        <div id="video_container">
    
            <h4 class="title">YOUTUBE VIDEOS</h4>
            <hr class="title_underline" />
            <div id="videos"></div>
        </div>
    </body>
    </html>
    Of course, replacing "USERNAME" with a YouTube channel.

    And this is my PHP code: videos.php
    PHP Code:
    <?php

    $xml 
    simplexml_load_file('http://gdata.youtube.com/feeds/api/users/'.$_GET['channel'].'/uploads');
    $video_limit $_GET['video_limit'];
    $count 0;

    foreach(
    $xml->entry as $video)
    {
    if(
    $count $video_limit)
    {
    $id $video->id;
    $url 'http://gdata.youtube.com/feeds/api/videos/';
    $video_id substr($idstrlen($url));

    ?>

            <div class = "video">

           <div class="thumbnail_container">
               <div class="thumbnail" videoid="<? echo $video_id?>"></div>
                </div>

            <div class="video_details">
           <div class="video_title"><? echo $video->title?></div>
             <div class="video_description"><? echo substr($video->content0200); ?></div>
            </div>

            <div class="clear"></div>

            <?php
    }
    $count++;
    }
    ?>
    With these two files, all I see is the title "YouTube Videos" underlined, followed by the Title of the video and the entire description of the video.

    I want to be able to limit the length of the description and implement the thumbnail containers.

    Anyone got any ideas?

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    That's a php thing... Nothing to do with CSS

    substr($video_id, 0,20);

    will show the first 20 characters of the description, if that's what you're trying to do.

  4. #3
    Junior Member Ruaille's Avatar
    Join Date
    Jun 2012
    Location
    Ireland
    Posts
    3
    Member #
    32078
    Thanks Webzarus, I changed the php.

    PHP Code:
    <div class="video_description"><? echo substr($video->content0200); ?></div>
    But I'm still stuck as to how to get the thumbnails to show like they do in the video.
    At the moment it doesn't show any kind of thumbnail at all and in the video he says that it's to do with CSS but he doesn't show the CSS...

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    So where is the actual CSS you're using ? If you're gonna use CSS to define the image as a background ( I think I read that right ), you're gonna need to define the url of the image. Not seeing that anywhere..

  6. #5
    Junior Member Ruaille's Avatar
    Join Date
    Jun 2012
    Location
    Ireland
    Posts
    3
    Member #
    32078
    HTML Code:
    $('.thumbnail').each(function(index) {
    var video_id = $(this).attr('videoid');
    var url = 'url(http://img.youtube.com/vi/'+video_id+'/'+numbers[0]+'.jpg)';                $(this).css('background-image', url);
    });
    It was in the html, I've kind of decided against using this anyway, a text feed should be sufficient for what I'm doing but if I can solve it in the future it would be nice to implement it into my own website.

  7. #6
    Senior Member Noteleklabs's Avatar
    Join Date
    Jun 2012
    Location
    NC
    Posts
    217
    Member #
    31890
    Liked
    28 times
    YES, this is totally me :-).

    in google chrome got here:
    http://174.108.108.195:8080/mineturtle/
    then press ctrl+u to see the source.
    the youtube video has several attributes to make it auto play, and have no control bar.
    check out all the attributes here:
    https://developers.google.com/youtube/player_parameters
    Hey you! Go make something!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:44 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com