Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Youtube horizontal VideoPreview
export class VideoPreview extends React.Component {
render() {
const horizontal = this.props.horizontal ? 'horizontal': null;
return (
<div className={['video-preview', horizontal].join(' ')}>
{/* rest unchanged */}
</div>
);
}
}
.video-preview {
display: grid;
grid: 118px auto / 210px;
/*
override grid settings to make VideoPreview horizontal.
Vertical is default
*/
&.horizontal {
grid: auto / 210px auto;
grid-column-gap: 4px;
.video-info {
grid-row: 1 / 2;
grid-column: 2 / 3;
}
}
}
/* rest unchanged */
import React from 'react';
import './Watch.scss';
import {VideoPreview} from '../../components/VideoPreview/VideoPreview';
export class Watch extends React.Component {
render() {
return (
<React.Fragment>
<VideoPreview horizontal={true}/>
<VideoPreview />
</React.Fragment>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.