Welcome to WebDesignForums.net!
You're currently viewing WDF as a guest. By registering for a free account, you'll be able to participate with other members in our friendly community. Being a member allows you to ask questions and get answers for those troublesome web development tasks!

In addition, as a member you'll be able to post your websites up for review. Using our unique website review system you can gain some amazing feedback from some of the best web developers around. This is a completely free service to all registered members.

Ready to register yet? Registration is 100% free. Click Here To Join Now!

What properties do I need to define in my CSS for these files?

Discussion in 'HTML and CSS Help' started by Ruaille, Jun 25, 2012.

  1. Offline

    Ruaille New Member

    Message Count:
    3
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    Ireland
    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:
    <!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:
    <?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($id, strlen($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->content, 0, 200); ?></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?


    Ruaille, Jun 25, 2012
    #1

  2. WDF Go Premium, Drop Ads

  3. Offline

    Webzarus Well-Known Member

    Message Count:
    2,999
    Likes Received:
    661
    Trophy Points:
    113
    Gender:
    Male
    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.


    Webzarus, Jun 25, 2012
    #2
  4. Offline

    Ruaille New Member

    Message Count:
    3
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    Ireland
    Thanks Webzarus, I changed the php.

    PHP:
    <div class="video_description"><? echo substr($video->content, 0, 200); ?></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...


    Ruaille, Jun 25, 2012
    #3
  5. Offline

    Webzarus Well-Known Member

    Message Count:
    2,999
    Likes Received:
    661
    Trophy Points:
    113
    Gender:
    Male
    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..


    Webzarus, Jun 25, 2012
    #4
  6. Offline

    Ruaille New Member

    Message Count:
    3
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    Ireland
    HTML:
    $('.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.


    Ruaille, Jun 26, 2012
    #5
  7. Offline

    Noteleklabs Active Member

    Message Count:
    173
    Likes Received:
    27
    Trophy Points:
    28
    Gender:
    Male
    Location:
    NC


    Noteleklabs, Jul 15, 2012
    #6
(You have insufficient privileges to reply here.)

Share This Page