Video article style fixes
This commit is contained in:
parent
96baa8883e
commit
68eb7833e7
|
@ -150,7 +150,7 @@ export const FullArticle = (props: ArticleProps) => {
|
||||||
)}
|
)}
|
||||||
</For>
|
</For>
|
||||||
</div>
|
</div>
|
||||||
<Show when={props.article.cover}>
|
<Show when={props.article.cover && props.article.layout !== 'video'}>
|
||||||
<div
|
<div
|
||||||
class={styles.shoutCover}
|
class={styles.shoutCover}
|
||||||
style={{ 'background-image': `url('${imageProxy(props.article.cover)}')` }}
|
style={{ 'background-image': `url('${imageProxy(props.article.cover)}')` }}
|
||||||
|
|
12
src/components/Article/VideoPlayer.module.scss
Normal file
12
src/components/Article/VideoPlayer.module.scss
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
.videoContainer {
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
margin: 0 0 1em -16.6666%;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,7 +1,8 @@
|
||||||
import { Show } from 'solid-js'
|
import { Show } from 'solid-js'
|
||||||
|
import styles from './VideoPlayer.module.scss'
|
||||||
|
|
||||||
export default (props: { url: string }) => (
|
export default (props: { url: string }) => (
|
||||||
<>
|
<div class={styles.videoContainer}>
|
||||||
<Show when={props.url.includes('youtube.com')}>
|
<Show when={props.url.includes('youtube.com')}>
|
||||||
<iframe
|
<iframe
|
||||||
id="ytplayer"
|
id="ytplayer"
|
||||||
|
@ -20,5 +21,5 @@ export default (props: { url: string }) => (
|
||||||
allowfullscreen
|
allowfullscreen
|
||||||
/>
|
/>
|
||||||
</Show>
|
</Show>
|
||||||
</>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue
Block a user