Obtain information from YouTube and format it into a list item

Currently, I'm working on compiling a list of videos that includes the title, link, image, and creator of each video. It's been a bit challenging :S

<script type="text/javascript">
$(document).ready(function(){
$.getJSON('http://gdata.youtube.com/feeds/users/Username/uploads?alt=json-in-script&callback=?&max-results=12&start-index=1', function(data) {

$.each(data.feed.entry, function(i, item) {

var title = item['title']['$t'];
var video = item['id']['$t'];

video = video.replace('http://gdata.youtube.com/feeds/videos/','http://www.youtube.com/v/');  
videoID = video.replace('http://www.youtube.com/watch?v=',''); 

$('.allvideos').append('<a rel="shadowbox[video];height=390;width=640;" href="'+video+'" style="width:100%;display:block;"> '+title+'</a>');
Shadowbox.setup();
});

});


});
</script>

Can anyone guide me on how to achieve this?

<div class="allvideos">
<div class="video">
<img src="[VIDEO_ICON]" />
<a href="[VIDEO_URL]">
<span>{NAME_VIDEO}</span>
<span>{NAME_CREATOR}</span>
</a>
</div>
</div>

Appreciate any help.

Answer №1

I have made some adjustments to the code you provided. Check it out here: http://jsfiddle.net/s6kNK/3/

After my modifications, the design looks much better and functions properly. However, I encountered an issue with displaying the correct image. I believe you have the skills to resolve this issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating dynamic animations by shifting the hue of an image on a canvas

Recently, I've been exploring the world of canvas tags and experimenting with drawing images on them. My current project involves creating a fake night/day animation that repeats continuously. After trying various approaches like SVG and CSS3 filters ...

Link Google Map Marker Click Event with Dynamic Binding

I'm currently working on binding a click event to a link that is positioned outside the Google Map Canvas. The goal is to open an "infowindow" on a map marker when this link is clicked. While I know how to achieve this for a specific point, I need a d ...

What separates $(document).ready() from embedding a script at the end of the body tag?

Can you explain the distinction between running a JavaScript function during jQuery's $(document).ready() and embedding it in the HTML within script tags at the bottom of the body? Appreciate your insights, DLiKS ...

How to run 'npm' scripts externally in package.json on Windows?

In the world of development, running arbitrary commands using npm run is a common practice. This involves adding a scripts hash to your package.json: "scripts": { "build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js" } To exec ...

The filter() and some() functions are not producing the anticipated output

Currently, I am in the process of developing a filtering mechanism to sift through a dataset obtained from an API. The array that requires filtering contains objects with various parameters, but my aim is to filter based only on specific parameters. For ...

Increasing the padding at the top of the logo when scrolling down the page

When scrolling down the page, there seems to be extra padding above the logo that is throwing off the alignment with the rest of the site. I've been trying different solutions to correct this issue: //$('.navbar-brand').css({ 'padding- ...

Is the URL endpoint for the moviedb not functioning properly?

While working on my android movie app that utilizes themoviedb, I encountered an error when trying to access the movies json endpoint. The error message received from postman was as follows: { "status_code": 7, "status_message": "Invalid API key: Y ...

What could be preventing me from exporting and applying my custom JavaScript styles?

This is my primary class import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import styles from './FoodStyles'; class Food extends Component { render () { return ( & ...

Tips for navigating the world of hybrid web applications that combine elements of both traditional multi-page applications and single-page

What are some best practices for developing a multi-page application using modern JavaScript frameworks? Multi-page Application In a multi-page application, we utilize multiple templates with "template syntax" to retrieve backend data and handle AJAX (if ...

How can we ensure the JSON output is easily searchable with grep?

The JSON structure I have is as follows: { "1":{ "state":{ "on":false, "bri":124, "hue":14985, "sat":252, "effect":"none", "xy":[ 0.5182, 0.4363 ], ...

Concealing empty rows within a vertical v-data-table using Vue

Below is the code that can be run to showcase my issue. Design: <div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="desserts" hide-default-header ...

Turn off self links (HAL) in Json for Spring Data Rest

I am new to using spring-data-rest. When I make a REST call in my application, I receive JSON data that includes self-links and links to related tables in the database. However, I would prefer to receive the actual JSON data instead of the links. The code ...

Issue with styled-components not being exported

Issue: ./src/card.js There was an import error: 'Bottom' is not exported from './styles/cards.style'. card.js import React from 'react' import { Bottom, Color, Text, Image } from "./styles/cards.style"; fu ...

The array is producing accurate results, however it is displaying as undefined in the HTML output

I have encountered a problem while working on my project. I am utilizing an API to fetch an array of platforms where a video game is available. Although the array is returning the correct data, I am facing difficulty in displaying these values in my HTML a ...

``There seems to be an issue with the functionality of Angular's $routeProvider

I'm currently facing an issue with my setup. I have a local angular front-end running on localhost using an Apache Server on Linux. When I try to access localhost, everything works fine and I can see my index.html. However, I have a link in the index. ...

Validation in AngularJS - Setting minimum length for textarea using ng-minlength

I am currently tackling a project that heavily relies on AngularJS for the front-end. Here's what I am dealing with: The validation requirement I am aiming for is as follows: The Next button should remain disabled unless the reason provided is at le ...

Utilize Javascript to convert centimeters into inches

Can anyone help me with a JavaScript function that accurately converts CM to IN? I've been using the code below: function toFeet(n) { var realFeet = ((n*0.393700) / 12); var feet = Math.floor(realFeet); var inches = Math.round(10*((realFeet ...

Issue with tensorflow.js multiple regression stochastic gradient descent optimization

Greetings, everyone! I have recently encountered a perplexing issue while attempting to fit a curve in tensorflow.js. Despite spending a considerable amount of time on it over the past couple of days, I haven't been able to resolve it yet. Given that ...

Check if the path meets the criteria to be considered valid JavaScript code

I have a javascript variable containing a path that may point to an image file, like ../app/assets/icon.png. If the path is incorrect or doesn't exist, I need to use a different file from another location. The final code should resemble this: var ver ...

Exploring the retrieval of data from .find within a JSON object using Node.js

In my custom database setup, which mirrors a collection in MongoDB containing JSON objects. export const roles = [ { _id: "870c4350-3cf5-4f35-8429-513bd86c6734", programId: "e3e20d57-571d-45ab-b13a-b07d29fcf968", profileId: "3cbaadcf-41e1-42 ...