Skip to content

Instantly share code, notes, and snippets.

@asus4
Created April 26, 2019 07:26
Show Gist options
  • Select an option

  • Save asus4/8364b2d328421e6819a43dafeecb3419 to your computer and use it in GitHub Desktop.

Select an option

Save asus4/8364b2d328421e6819a43dafeecb3419 to your computer and use it in GitHub Desktop.
No cookie Youtube.vue and Vimeo.vue for website in EU
<template lang="pug">
.vimeo
.player(ref="player")
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Player, { Options } from '@vimeo/player'
// Vue wrapper for
// https://github.com/vimeo/player.js
const NO_COOKIE = true
@Component
export default class Vimeo extends Vue {
@Prop({ default: 0 })
videoId!: number
@Prop({ default: false })
autoPlay!: boolean
$refs!: {
player: HTMLDivElement;
}
private player!: Player
async mounted () {
const options = {
id: this.videoId,
playsinline: true,
// color: '#00aaff', // do not work
dnt: NO_COOKIE
} as Options
this.player = new Player(this.$refs.player, options)
if (this.autoPlay) {
this.player.play()
}
}
}
</script>
<style lang="sass">
.vimeo
iframe
display: block
position: absolute
width: 100%
height: 100%
top: 0
left: 0
</style>
<template lang="pug">
.youtube
.player(ref="player")
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import PlayerFactory from 'youtube-player'
import { YouTubePlayer, Options } from 'youtube-player/dist/types'
// Vue wrapper for
// https://github.com/gajus/youtube-player
const NO_COOKIE = true
@Component
export default class YouTube extends Vue {
@Prop({ default: '' })
videoId!: string
@Prop({ default: false })
autoPlay!: boolean
$refs!: {
player: HTMLDivElement;
}
private player!: YouTubePlayer
async mounted () {
const options: any = {
videoId: this.videoId,
playerVars: {
color: 'white',
playsinline: 1,
controls: 1,
enablejsapi: 1,
rel: 0
}
}
if (NO_COOKIE) {
options['host'] = 'https://www.youtube-nocookie.com'
}
this.player = PlayerFactory(this.$refs.player, options as Options)
if (this.autoPlay) {
this.player.playVideo()
}
}
}
</script>
<style lang="sass">
.youtube
iframe
display: block
position: absolute
width: 100%
height: 100%
top: 0
left: 0
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment