This is a component for Vue.js to utilize YouTube, Vimeo, DailyMotion, Coub iframe embed API easily.
☞ Vue JS - The Complete Guide (incl. Vue Router & Vuex)
☞ How to Create a Chrome Extension with Vue.js
☞ How To Build a Blog with Nest.js, MongoDB, and Vue.js
npm install v-video-embedyarn install v-video-embed<script src="https://unpkg.com/v-video-embed/dist/video-embed.min.js" type="text/javascript"></script> import Vue from 'vue' import Embed from 'v-video-embed' // global register Vue.use(Embed);<video-embed src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed> # custom params <video-embed :params="{autoplay: 1}" src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed># vimeo <video-embed src="https://vimeo.com/370293725"></video-embed> # dailymotion <video-embed src="https://dai.ly/x7n7y06"></video-embed> # coub <video-embed src="https://coub.com/embed/22eztb"></video-embed><!-- 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>