Commit 8618a755 authored by Dan Notestein's avatar Dan Notestein
Browse files

Merge branch 'fix-youtube-css' into 'develop'

Fix Youtube CSS

See merge request !290
parents 278eaa88 1afab8b8
...@@ -5,23 +5,23 @@ import PropTypes from 'prop-types'; ...@@ -5,23 +5,23 @@ import PropTypes from 'prop-types';
const { string, number } = PropTypes; const { string, number } = PropTypes;
/** Lots of iframes in a post can be very slow. This component only inserts the iframe when it is actually needed. */ const propTypes = {
export default class YoutubePreview extends React.Component { youTubeId: string.isRequired,
static propTypes = { width: number,
youTubeId: string.isRequired, height: number,
width: number, startTime: number,
height: number, dataParams: string,
startTime: number, };
dataParams: string,
};
static defaultProps = { const defaultProps = {
width: 640, width: 640,
height: 360, height: 360,
startTime: 0, startTime: 0,
dataParams: 'enablejsapi=0&rel=0&origin=https://hive.blog', dataParams: 'enablejsapi=0&rel=0&origin=https://hive.blog',
}; };
/** Lots of iframes in a post can be very slow. This component only inserts the iframe when it is actually needed. */
export default class YoutubePreview extends React.Component {
constructor() { constructor() {
super(); super();
this.state = {}; this.state = {};
...@@ -35,8 +35,8 @@ export default class YoutubePreview extends React.Component { ...@@ -35,8 +35,8 @@ export default class YoutubePreview extends React.Component {
render() { render() {
const { const {
youTubeId, width, height, startTime, dataParams youTubeId, width, height, startTime, dataParams
} = this.props; } = this.props;
const { play } = this.state; const { play } = this.state;
if (!play) { if (!play) {
...@@ -44,8 +44,8 @@ export default class YoutubePreview extends React.Component { ...@@ -44,8 +44,8 @@ export default class YoutubePreview extends React.Component {
// hqdefault.jpg (high quality version, 480px × 360px // hqdefault.jpg (high quality version, 480px × 360px
// sddefault.jpg (standard definition version, 640px × 480px) // sddefault.jpg (standard definition version, 640px × 480px)
const thumbnail = width <= 320 const thumbnail = width <= 320
? 'mqdefault.jpg' ? 'mqdefault.jpg'
: width <= 480 : width <= 480
? 'hqdefault.jpg' ? 'hqdefault.jpg'
: '0.jpg'; : '0.jpg';
const previewLink = `https://img.youtube.com/vi/${youTubeId}/${thumbnail}`; const previewLink = `https://img.youtube.com/vi/${youTubeId}/${thumbnail}`;
...@@ -67,8 +67,17 @@ export default class YoutubePreview extends React.Component { ...@@ -67,8 +67,17 @@ export default class YoutubePreview extends React.Component {
} }
const autoPlaySrc = `https://www.youtube.com/embed/${youTubeId}?autoplay=1&autohide=1&${dataParams}&start=${startTime}`; const autoPlaySrc = `https://www.youtube.com/embed/${youTubeId}?autoplay=1&autohide=1&${dataParams}&start=${startTime}`;
const aspectRatioPercent = (height / width) * 100;
return ( return (
<div className="videoWrapper"> <div
className="videoWrapper"
style={{
position: 'relative',
width: '100%',
height: 0,
paddingBottom: `${aspectRatioPercent}%`,
}}
>
<iframe <iframe
width={width} width={width}
height={height} height={height}
...@@ -81,3 +90,6 @@ export default class YoutubePreview extends React.Component { ...@@ -81,3 +90,6 @@ export default class YoutubePreview extends React.Component {
); );
} }
} }
YoutubePreview.propTypes = propTypes;
YoutubePreview.defaultProps = defaultProps;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment