Skip to content
Advertisement

Display different video source according to screen size

I am trying to load different videos according to the screen size. I found a solution to doing this using javascript. However, I am not able to integrate this code into nuxt.js.

Working Code: HTML

JavaScript

JAVASCRIPT

JavaScript

The Fiddle: https://jsfiddle.net/j78w36er/2/

I tried to integrate like this:

JavaScript

I would be very thankful for any kind of help!

Advertisement

Answer

Your code is primarily invalid and not compliant With Vue. The correct code should look like this (.vue file):

JavaScript

but unfortunately there are a lot of bad practices here that you should keep in mind when writing your code. A few tips from me:

  • study basic concepts of vue, there are lot of vue bugs in data, mounted. Check how vue works in documentation.
  • use debounce function when you work with events like resize, scroll etc.
  • use DRY pattern
  • you can use vue $refs instead of querySelector
User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement