Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Youtube dynamic VideoPreview first version
import React from 'react';
import {Image} from 'semantic-ui-react';
import './VideoPreview.scss';
export class VideoPreview extends React.Component {
render() {
const {video} = this.props;
if (!video) {
return <div/>;
const horizontal = this.props.horizontal ? 'horizontal': null;
return (
<div className={['video-preview', horizontal].join(' ')}>
<div className='image-container'>
<Image src={video.snippet.thumbnails.medium.url}/>
<div className='time-label'>
<div className='video-info'>
<div className='semi-bold show-max-two-lines'>{video.snippet.title}</div>
<div className='video-preview-metadata-container'>
<div className='channel-title'>{video.snippet.channelTitle}</div>
<div><span>{video.statistics.viewCount} views • {video.snippet.publishedAt}</span></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment