87 lines
2.4 KiB
JavaScript
87 lines
2.4 KiB
JavaScript
import React, { Fragment } from 'react'
|
|
import { Typography } from '@material-ui/core';
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import _ from "lodash"
|
|
import Ar from "lodash/array"
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
video: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
position: 'relative',
|
|
paddingBottom: '56%', /* 16:9 58%*/
|
|
'& iframe': {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 'calc(50% - 50vw)',
|
|
width: '100vw',
|
|
height: '100%',
|
|
},
|
|
[theme.breakpoints.up('md')]: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
position: 'relative',
|
|
paddingBottom: '36%', /* 16:9 */
|
|
'& iframe': {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 'calc(50% - 32vw)',
|
|
width: '64vw',
|
|
height: '100%',
|
|
},
|
|
},
|
|
},
|
|
videoPresentation: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
position: 'relative',
|
|
paddingBottom: '56%', /* 16:9 58%*/
|
|
'& iframe': {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 'calc(50% - 50vw)',
|
|
width: '100vw',
|
|
height: '100%',
|
|
},
|
|
[theme.breakpoints.up('md')]: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
position: 'relative',
|
|
paddingBottom: '56.5%', /* 16:9 */
|
|
'& iframe': {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 'calc(50% - 32vw)',
|
|
width: '64vw',
|
|
height: '100%',
|
|
},
|
|
},
|
|
}
|
|
}));
|
|
|
|
export default function VideoVimeo(props) {
|
|
|
|
const {videoId, title, options, classesOverride, autoplay} = props;
|
|
const classes = useStyles();
|
|
let className = classes.video;
|
|
if (classesOverride) {
|
|
className = classes.videoPresentation;
|
|
}
|
|
|
|
return (
|
|
|
|
<section className={className +' '+classesOverride}>
|
|
<iframe className='player'
|
|
src={"https://player.vimeo.com/video/"+ videoId + options+"?texttrack=fr&autoplay="+autoplay}
|
|
frameBorder="0"
|
|
title={title}
|
|
webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen></iframe>
|
|
|
|
</section>
|
|
)
|
|
}
|
|
|
|
|
|
VideoVimeo.defaultProps = {
|
|
options: "",
|
|
}; |