DEV Community

GreenestGoat
GreenestGoat

Posted on

1

vueframe a simple Vue 3 component library for embedding video players

Just wanted to share a project I've been working on called vueframe, offering a simple way to embed players such a YouTube and Vimeo easily with a universal API.

Its also the first time I've built a component library with VueJS so I would love feedback on this project so i can improve it and make it better.

here's the GitHub repo if your interested.

also a star would be Awesome :)

EDIT:

I'm also working on a documentation website

Installation šŸ“¦

# npm
npm install @vueframe/vueframe
Enter fullscreen mode Exit fullscreen mode

Setup āš™ļø

// main.ts / main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueFrame from '@vueframe/vueframe'

createApp(App)
  .use(VueFrame)
  .mount('#app')
Enter fullscreen mode Exit fullscreen mode

Usage šŸ’»

App.vue

YouTube

<YouTube id="dQw4w9WgXcQ" />
Enter fullscreen mode Exit fullscreen mode

Vimeo

<Vimeo id="676247342" />
Enter fullscreen mode Exit fullscreen mode

Dailymotion

This component currently does not support autoplay or muted

<Dailymotion id="x8i1ffw" />
Enter fullscreen mode Exit fullscreen mode

Props šŸŽ›ļø

Prop Type Default Description
id string Required Video ID from the platform
autoplay boolean false Auto-start playback
muted boolean false Initialize video muted
width `string\ number` "1024px"
height `string\ number` "576px"

Examples šŸŽÆ

With Props

<YouTube id="dQw4w9WgXcQ" autoplay muted width="800px" height="450px" />
Enter fullscreen mode Exit fullscreen mode

License šŸ“„

MIT Ā© vueframe

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

šŸ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay