FitVids.js | use jQuery plugin for fluid width video embeds | Video Utils library

I am new in wordpress technology i apologies if i ask basic question here.

actually i am trying to remove contact form 7 style and js file from all other pages except contact us, so what i did in function.php

I just started a new project and am working with a bootstrap theme that I would like integrated with my Nuxt.js project.

I believe I have loaded all of the css asset files properly, although I am trying to figure out how to properly add the JS files.

I have tried loading the script source files in nuxt.config.js like this:

Im using bxslider to show images and videos on a slider and i need that the slider show images every 5 seconds but when a video appears, the video autoplay until the end. Then, show the next slide. All of this must be in a loop.

Im stuck and this is not working properly. Here are my problems:

1.- If i set the bxslider "auto=true" to change from one slider to another, it does it when the video is playing.

2.- If i disable the "auto" property the first video play until the end and then change to the next slider, but the next video doesn't play. Instead of that, the first video plays again.

3.- It would be great do this without a plugin, because after solve this I need add some PHP to dinamize the content.

Here is the code:

I have a landing page here which mouse scroll (scroll wheel) doesn't work on it but I can scroll on page by clicking on browser scrollbar and move it.
I had check it in other browser (Firefox) which was working fine even I checked it with several mobile devices and it was OK even in chrome !
This problem is just on chrome desktop version.
I'm using Ubuntu and chrome Version 67.0.3396.99 (Official Build) (64-bit).
Update 1 : scroll wheel stop working after page loads completely
Update 2 : I found that when you hover on the video which is on the page it works fine ! and you can scroll with scroll wheel.

Yes, I did my research and as far as I can find so far I am unable to figure out why seemingly out of nowhere the product tabs are no longer functioning as expected. In the Console, I see:

I have an image/video carousel and I'm having trouble keeping all the content in the carousel the same height.

When you click on the thumbnails, the main image heights don't match up.

How do I keep everything the same height, yet responsive at the same time?

(I added some pictures to show what I mean)

Here's the codepen.

Edit: I want to keep the main images shown in the carousel the same height, not the thumbnails.

I have an image/video carousel with previous and next buttons. The problem I'm having is that when I resize the window, the arrows get longer and don't stick to the frame of the videos. On the last image of the carousel, the arrows stay the "same size" as the picture. But in the two vimeo videos, they don't. This causes the thumbnails below it to be pushed down very far. How do I stop the arrows from getting "longer" than the image?

(I want the carousel to look like this when I resize the window.)

Here's the codepen. Please help, I don't know how to fix this.

I have an image/video carousel with thumbnails. I'm trying to make the thumbnails responsive, but I can only do the width as a percentage and not the height. Whenever I resize the window, they loose the rectangular shape I want.

I tried using vh but it didn't work. I want the thumbnails to mimic what I've done for this site.

Here's the codepen.

I have a Vimeo carousel with Froogaloop implemented. I tried making the Vimeo videos responsive with FitVids.js.

I can't seem to get it to work. When I resize the window, the Vimeo videos don't resize along with it. Here's the codepen.

Is there a way to make the videos responsive without using a plugin?