Include vue-videobg in Vuetify using CDN without the need for webpack

I am trying to integrate vue-videobg into vuetify using a CDN without any additional requirements like "magic_videobg_to_install.java.css.js.htm"

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1811100a3e485006">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98eeedfdecf1fee1d8aab6e0">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vuetify-video-parallax"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>Hello world</v-container>

  <v-video-parallax src="http://techslides.com/demos/sample-videos/small.mp4" img="assets/city.png" height="600">
  Some Html Here and the video is <b>normally</b> in the background...
</v-video-parallax>


      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6412110124564a1c">[email protected]</a>/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="285e5d4d5c414e51681a0650">[email protected]</a>/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
 components: {
    VuetifyVideoParallax: window["vuetify-video-parallax"]
  },
      vuetify: new Vuetify(),
        data() {
         return {
        "important": true,
        "is_video_parallax_work": "no plz help me",
        }
        }
    })
  </script>
</body>
</html>
The given code is functional HOWEVER I'm facing an issue with the video-parallax component. It shows a Vue warning: "Unknown custom element - did you register the component correctly? For recursive components, make sure to provide the 'name' option." Can someone please assist me with this?
javascriptvue.jshtml5-videovuetify.js

Answer №1

add the following line `<script src="https://unpkg.com/vuetify-video-parallax"></script>` right after the `vuetify` section


    
    
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40262f2e3400766e38">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16606373627f706f5624386e">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
      <template>
        <v-video-parallax 
        :src="src"
        img="http://prcagrimex.co.th/en/wp-content/uploads/2014/04/dummy-image-green-e1398449160839-300x214.jpg"  
        height="600">
            Some Html Here
          </v-video-parallax>
      </template>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92e4e7f7d2a0bcea">[email protected]</a>/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7d1d2c2d3cec1dee79589df">[email protected]</a>/dist/vuetify.js"></script>
  <script src="https://unpkg.com/vuetify-video-parallax"></script>
  <script>
    new Vue({
      data: () => ({ 
          message: 'Row',
      src: 'https://media.istockphoto.com/videos/the-couple-with-camping-backpacks-walking-to-the-mountain-top-slow-video-id1151597371',
       }),
    }).$mount('#app');
  </script>
  
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Showcasing certain elements as the user scrolls

Looking for a way to display an element (such as a div) when the user scrolls without using JQuery? Here's an example that tries to achieve this: var scroll = document.body.scrollTop; var divLis = document.querySelectorAll("div"); for(let i = 0; i ...

javascripthtmlcss

What could be causing the TypeError that is preventing my code from running smoothly?

I can't seem to figure out why I'm constantly encountering the error message Cannot destructure property 'id' of 'this.props.customer' as it is undefined.. Despite double-checking my code and making sure everything looks corre ...

javascriptreactjsdebugging

Distinctive titles for JavaScript constructors/prototypes compared to classes

When working with JavaScript ES6, classes allow us to write code like this: class RectangularShape { constructor(height, width) { this.height = height; this.width = width; } getArea() { return this.height * this.width } static some ...

javascriptecmascript-6terminologyecmascript-5

Modifying the content within a DIV element

I want to make changes to my DIV. <div id="main"> <div id="one"> <div class="red"> ... </div> <img class="avatar" src="img/avatar1.jpg"/> <span class="name"> John < ...

javascriptjqueryhtmldomweb

What could be causing the <td> onclick event to fail in asp.net?

Having an issue with making a <td> clickable to display a div. Check out my code snippet below: <td id="tdmord" style="padding-left: 15px; color: #86A7C5; padding-right: 15px; font-family: Arial; font-size: small;" onclick="return showDiv1()"& ...

javascriptonclickhtml-table

What is the process for bundling a separate JavaScript file with Webpack5?

I am new to the world of webpack. I have 2 javascript files and I want to designate one as the main entry file. However, for the other file, I only want to include it in specific files. For example, looking at the file structure below, main.js is my entr ...

javascriptnpmwebpackfrontendwebpack-5

What could be causing my Javascript clock to malfunction?

I am having an issue with my clock code, which is supposed to display the date and time set 2 weeks in advance. Unfortunately, it is not working on either local or server environments. Can anyone help me troubleshoot this problem? Here is the code that I ...

javascriptjqueryhtmlclock

Burst or displace meshes outward from the center

I am attempting to separate all the meshes that make up the loaded obj file from each other in order for the user to easily view each mesh individually. I am striving to replicate a similar functionality as shown in this example: Demo To achieve this ef ...

javascriptthree.jstesselation

Content sliding to the left due to modal prompt

I've searched through various questions and answers but haven't been able to resolve this issue. There's a modal on my page that is causing the content to shift slightly to the left. I've created a sample fiddle, although it doesn&apo ...

javascripthtmlcssbootstrap-4bootstrap-modal

I am unable to organize an array

I stumbled upon a discussion about clearing an array in JavaScript, but unfortunately I can't participate there. So, here's my query: I have the following code snippet: sumarray.length=0; sumarray = []; for (var i=0; i<3; i++) sumar ...

javascriptarrays

discord.js fails to provide a response

const fs = require('node:fs'); const path = require('node:path'); const { Client, Collection, Events, GatewayIntentBits } = require('discord.js'); const { token } = require('./config.json'); const client = new Clien ...

javascriptnode.jsdiscord.js

Responsive Fullscreen Bootstrap Panel with Highcharts

One issue I'm facing is with my (bootstrap) panels that contain Highcharts charts and I want them to show fullscreen without losing their aspect ratio. The problem is that the size of the Highcharts does not adjust when going into full-screen mode. Is ...

javascriptphptwitter-bootstraphighchartsfullscreen

Angular - send multiple HTTP requests for the length of an array and combine the responses into one array

Exploring angular for the first time and dabbling with the trello API. I have an array containing some list IDs that I need to make HTTP GET calls for, equal to the length of the array. For instance, if there are two IDs in the array, then the HTTP call sh ...

javascriptjqueryarraysangularfor-loop

Having trouble with transferring information from JQuery to PHP

Currently, I'm working on transmitting data from jQuery to PHP. Here's an excerpt of what I've done: var jsonArray = JSON.stringify(dataArray); $.ajax({ type: "POST", url: "addcar_details.php", ...

javascriptphpjqueryhtmlajax

Adjust the navigation menu to display or hide as the page is being scrolled

Implementing an offset to display/hide the navigation menu when the page is scrolled 100px. Attempted to modify from lastScroll = 0 to lastScroll = 100 but it did not work as expected. Jquery: Fiddle // Script lastScroll = 0; $(window).on('scroll&ap ...

javascriptjqueryhtmlscrolloffset

The Zustand store does not reflect changes when the URL is updated

I have a Zustand store connected to the URL. See the code snippet provided below. import { create } from "zustand"; import { persist, StateStorage, createJSONStorage } from "zustand/middleware"; const pathStorage: StateStorage = { ge ...

javascriptreactjsdomnext.jszustand

What could be the reason why a specific item is not being retrieved by its ID?

Whenever I navigate to the route: '/gallery', all the items from the file './posts.json' are fetched and displayed on the screen. However, upon navigating to the route: '/gallery/:id', my intention is to retrieve a single item ...

javascriptnode.jsexpressecmascript-6routes

A guide to selecting the dropdown item labeled as (Select All) using Python and Selenium

edit: Trying to submit parameters for a database-generated report on this page. Successfully modified the start date in the first field using send_keys(), but unable to click on "(Select All)" for fields 3 and onwards, except one. In order to access the h ...

javascriptpythonseleniumdrop-down-menuwebdriverwait

Developing a robust system for managing classnames

I have a question regarding the article I found on Quora about Facebook's CSS class names structure. They mentioned that both Facebook and Google use a build system to convert developer-friendly class names into shorter ones to save bandwidth and crea ...

javascriptphpjquerycss

What is the best way to position a <td> element within a table row underneath another <td>?

Looking for a solution to ensure Content 3 appears below Content 2 in this block of HTML. Content 1 is extensive and extends far down the page. <table> <tr> <td>(Content 1)</td> <td>(Content 2)</td> ...

javascriptjqueryhtmlcss