How to add yoube video in looped swiper? - vue.js

I made slide in swiper.js.
Each slide has image or youtube video.
I tried youtube api to add iframe to slide but only one element has id but looped slide duplaicate each slide so it add only one video in slide.
How can I add yoube video in looped swiper?
Here is code. https://codesandbox.io/s/icy-thunder-j4ub33

Related

How do I know which page I am on(react-native-swiper)?

I am developing a small app with React Native and I am using "react-native-swiper" in my app.
In this package "react-native-swiper", how do I know which page I am on now?
Can I get some value indicates which slide I am on such as slide index?
Now in the screen, there are 2 slides and every slides have same image which position is eccentric outside the slide. And I overlapped 2 images.
The problem is that:
In android, while I push from slide 1 to slide 2, then pink image disappear, but not iOS.
So I want to control it's opacity according to the slide index.
How to get the slide index in "react-native-swiper"?
you can use onIndexChanged prop function Called with the new index when the user swiped
This will give you the index of the current slide.

hiding flexslider nav arrows

1) I have a video website with a index.html (single-page), in which consider around 5 videos enclosed with a tag. In this for the video carousel, flex-slider is used. when the first video plays, I would like to hide the flexslider navigation arrows hide automatically and show when each video ends. I tried and did it in css by making 'visibility:hidden', but it hides permanently, I want it to show/hide during the runtime. how do I do it?
2) For the same video website, I would like to hide the video play-back controls auto hide. During the video plays, the playback controls should hide and it should visible only when the video ends.
Please help me in completing it
Thanks in advance

Dropdown menu over video?

Using Bootstrap is there a way to overlay a glyphicon dropdown menu over a video (mp4) , or alternatively, can I make an mp4 a background? I've tried everything and can't get it to work. I can get the glyphicon to overlay the video, but can't make it function as a dropdown. I can also get the dropdown to work over a background, but can't seem to make the video work as a background.
Thanks,
Jon
You can adjust your dropdown menu div on video by using position absolute for dropdown div and use position relative for main content.

bx slider gotoslide from other page link

I try to jump directly to a slide of my bx slider through a link from another page. For example - on page1.html there is a link to slide 7 of the slider on page2.html. How can I control the gotoslide function from an external page?
for all those who were searching for the same thing. My solution for now:
in the page where the slider is situated:
var startingSlide=document.URL.substring(document.URL.lastIndexOf('?')+1)-1;
and make
startSlide: startingSlide instead of a slide number.
The link from the other page to a specific slide is like this:
specific slide if you want to got to slide 5.
Don't know if that's the best way, but it works.

How to make Fotorama Slider to resume slides autoplay once a video is played and ends in the slider?

I want the Fotorama slider to resume the autoplay of video slides after video play in slider.
Here is a more clear picture of what I want.
Fotorama video slider slides all the videos.
User clicks on a slide and the slide plays the video in it.
Once the video ends the slider continues playing the slides.
Please can someone help me how to solve this ?
No way. Fotorama only attaches/detaches iframes and doesn’t know the state of playback.
To do what you want you need to connect with Player Javascript API (YouTube for example). It goes beyond a tiny plugin.