Video Embed Component for Vue.JS

Video Embed Component for Vue.JS

This is a component for Vue.js to utilize YouTube, Vimeo, DailyMotion, Youku, Coub... iframe embed API easily.

This is a component for Vue.js to utilize YouTube, Vimeo, DailyMotion, Coub... iframe embed API easily.

Support

  • Youtube
  • Vimeo
  • DailyMotion
  • Coub ...

Install with NPM

npm install v-video-embed

Install with Yarn

yarn install v-video-embed

How to use Vue Video Embed

import Vue from 'vue'
import Embed from 'v-video-embed'

// global register
Vue.use(Embed);

Vue Youtube Video Embed

<video-embed src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>

You can add custom Youtube params

<video-embed :params="{autoplay: 1}" src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>

Vue Vimeo Video Embed

<video-embed src="https://vimeo.com/362754811"></video-embed>

Vue Dailymotion Video Embed

<video-embed src="https://dai.ly/x7n7y06"></video-embed>

Vue Coub Video Embed

<video-embed src="https://coub.com/embed/22eztb"></video-embed>

Change Display Ratio with Css Class

<!-- 21:9 aspect ratio -->
 <video-embed css="embed-responsive-21by9" src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>

 <!-- 16:9 aspect ratio: default -->
 <video-embed css="embed-responsive-16by9" src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>

 <!-- 4:3 aspect ratio -->
 <video-embed css="embed-responsive-4by3" src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>

 <!-- 1:1 aspect ratio -->
 <video-embed css="embed-responsive-1by1" src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>
<video-embed ref="youtube" src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>

<button class="btn btn-primary" v-on:click="change">Change Url</button>


<script>


    export default {

        methods: {

            change() {

                this.$refs.youtube.src = "https://www.youtube.com/watch?v=nqwQpXoSN7Q";

            }
        }

    }
</script>

Use CDN

<script src="https://unpkg.com/v-video-embed/dist/video-embed.min.js" type="text/javascript"></script>

Source Code

https://github.com/nasa8x/v-video-embed

vue vuejs vue-js embed

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue js Axios Tutorial

Vue js Axios Tutorial. We will see Vue axios post request, Vue js headers and Vue js get request. We will use Node.js as backend platform.

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.