Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Create video player component

Browse source
This commit is contained in:
Sam Carlton 2020-12-11 00:59:52 -06:00
parent a29c248b7e
commit 5a338cf641
2 changed files with 44 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

38
components/video/player.vue Normal file
View file

@ -0,0 +1,38 @@
<template>
<div
:style="{
'left': '50%',
'right': '50%',
'margin-left': '-50vw',
'margin-right': '-50vw'
}"
class="video-canvas w-screen flex justify-center bg-black"
>
<div class="ratio-wrapper w-full max-w-4xl">
<div class="relative overflow-hidden w-full pb-16/9">
<iframe
:src="`https://www.youtube-nocookie.com/embed/${video.id}?autoplay=1&modestbranding=1&playsinline=1`"
class="absolute h-full w-full object-cover"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
/>
</div>
</div>
</div>
</template>
<script>
export default {
// components: {
// VideoCard
// },
props: {
video: {
type: Object,
required: true
}
}
}
</script>

28
pages/tv/_slug.vue
View file

@ -1,27 +1,9 @@
<template>
<section class="container py-16">
<div class="flex flex-col items-center text-center space-y-6">
<div
:style="{
'left': '50%',
'right': '50%',
'margin-left': '-50vw',
'margin-right': '-50vw'
}"
class="video-canvas w-screen flex justify-center bg-black"
>
<div class="ratio-wrapper w-full max-w-4xl">
<div class="relative overflow-hidden w-full pb-16/9">
<iframe
:src="`https://www.youtube-nocookie.com/embed/${video.id}?autoplay=1&modestbranding=1&playsinline=1`"
class="absolute h-full w-full object-cover"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
/>
</div>
</div>
</div>
<VideoPlayer
:video="video"
/>
<h1 class="title text-sm md:text-3xl font-semibold">
{{ video.name }}
@ -75,12 +57,14 @@
import LinkButton from '~/components/link-button.vue'
import EmailSubscribe from '~/components/email-subscribe.vue'
import VideoRow from '~/components/video/row.vue'
import VideoPlayer from '~/components/video/player.vue'
export default {
components: {
LinkButton,
EmailSubscribe,
VideoRow
VideoRow,
VideoPlayer
},
async asyncData ({ params: { slug } }) {