Live Coding: Vue JS from Scratch

In this live coding session, we will be building an embedded YouTube video replayer using Vue JS and the Plyr video player library.

What You Will Need

• Basic knowledge of HTML, CSS, and JavaScript
• Node.js installed on your computer
• Vue CLI installed on your computer

Setting Up the Project

First, let’s create a new Vue project using Vue CLI. Open your terminal and run the following commands:


npm install -g @vue/cli
vue create youtube-replayer


Once your project is created, navigate into the project directory and install the Plyr library by running the following command:


npm install vue-plyr


Building the Embedded YouTube Video Replayer

Now that we have our project set up, let’s start building the embedded YouTube video replayer. Create a new component called VideoPlayer.vue and add the following code:

    <template>
        <div>
            <plyr :options="playerOptions" ref="plyr" @mounted="onPlayerMounted"></plyr>
        </div>
    </template>

    <script>
    import Plyr from 'vue-plyr'

    export default {
        components: {
            Plyr
        },
        data() {
            return {
                playerOptions: {
                    controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen'],
                    youtube: {
                        iv_load_policy: 3
                    }
                }
            }
        },
        methods: {
            onPlayerMounted(player) {
                this.$refs.plyr.player.source = {
                    type: 'video',
                    sources: [
                        {
                            src: 'https://www.youtube.com/watch?v=YOUR_VIDEO_ID',
                            provider: 'youtube'
                        }
                    ]
                }
            }
        }
    }
    </script>
    

Embedding the Video Replayer in Your App

Now that we have our VideoPlayer component, we can use it in our main app. Open App.vue and add the following code:

    <template>
        <div id="app">
            <VideoPlayer />
        </div>
    </template>

    <script>
    import VideoPlayer from './components/VideoPlayer.vue'

    export default {
        components: {
            VideoPlayer
        }
    }
    </script>
    

Conclusion

Congratulations! You have successfully built an embedded YouTube video replayer using Vue JS and the Plyr video player library. You can now customize the player options and embed different YouTube videos in your app.