Skip to content

Instantly share code, notes, and snippets.

@kawnayeen
Created April 2, 2019 17:43
Show Gist options
  • Save kawnayeen/0fb60ac29286ef4d225b99dc68f92cb2 to your computer and use it in GitHub Desktop.
Save kawnayeen/0fb60ac29286ef4d225b99dc68f92cb2 to your computer and use it in GitHub Desktop.
Enhanced Youtube #4 - Video List Item
// step one
const VideoListItem = ({video}) => {
console.log(video);
return (
<li className="list-group-item">
<div className="video-list media">
<div className="media-left">
<img className="media-object" />
</div>
<div className="media-body">
<div className="media-heading"></div>
</div>
</div>
</li>
);
};
// step two
const VideoListItem = ({video}) => {
console.log(video);
const thumbnailUrl = video.snippet.thumbnails.default.url;
const title = video.snippet.title;
return (
<li className="list-group-item">
<div className="video-list media">
<div className="media-left">
<img className="media-object" src={thumbnailUrl}/>
</div>
<div className="media-body">
<div className="media-heading">{title}</div>
</div>
</div>
</li>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment