My Flexslider video is starting automatically, but I don’t want it!

Asked

Viewed 29 times

-3

Eae you guys, beauty?

I’m going through a problem implemented a video slider on a website I’m doing, but this slider is playing the videos contained in it automatically, and I don’t know how to take it, I’ve tried it in several ways, putting as "false", the "Animation","animationLoop" etc. But I’m not getting it.

I’m using Flexslider to do this!

Below is my code in JS and also in HTML

Could someone help me ?

Code in JS :

$(document).ready(function(){   

$(".flexslider-video")    
.flexslider({
  animation: false,
  useCSS: false,
  animationLoop: false,
  smoothHeight: true,
  video: false,  

});

});

Code in the HTML:

<div class="flexslider-video">           
<div class="flex-viewport" style="overflow: hidden; position: relative; height: 286.333px;">
    <ul class="slides" style="width: 400%; margin-left: -570px;">
        <li class="" data-thumb-alt="" style="width: 570px; margin-right: 0px; float: left; display: block;">
            <iframe id="player_0" src="https://www.youtube.com/watch?v=8A6OqHd6dPY" width="600" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
        </li>
        <li data-thumb-alt="" class="flex-active-slide" style="width: 570px; margin-right: 0px; float: left; display: block;">
            <iframe id="player_1" src="https://www.youtube.com/watch?v=8A6OqHd6dPY" width="600" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
        </li>
    </ul>
</div>
<ol class="flex-control-nav flex-control-paging">
    <li>
        <a href="#" class="">
            1
        </a>
    </li>
    <li>
        <a href="#" class="flex-active">
            2
        </a>
    </li>
</ol>
<ul class="flex-direction-nav">
    <li class="flex-nav-prev">
        <a class="flex-prev" href="#" tabindex="-1">
            Previous
        </a>
    </li>
    <li class="flex-nav-next">
        <a class="flex-next flex-disabled" href="#" tabindex="-1">
            Next
        </a>
    </li>
</ul>

1 answer

1

The video has nothing to do with the slide, only this contained inside it, you could put anything inside the slide, expect the slide control beyond what it was programmed to do makes no sense, so obviously "Animation" and "animationLoop" are transition configuration of slides and animated elements of the slide itself

The urls that used video also should not work, I believe youtube would block them, since they are different origins, the correct thing would be to use the Urls in this format provided by YOUTUBE itself:

http://www.youtube.com/embed/VIDEO_ID

Staying:

    <li class="" data-thumb-alt="" style="width: 570px; margin-right: 0px; float: left; display: block;">
        <iframe id="player_0" src="http://www.youtube.com/embed/8A6OqHd6dPY" width="600" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
    </li>
    <li data-thumb-alt="" class="flex-active-slide" style="width: 570px; margin-right: 0px; float: left; display: block;">
        <iframe id="player_1" src="http://www.youtube.com/embed/8A6OqHd6dPY" width="600" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
    </li>

By default autoplay must be "off", but if not (I had no way to test) use the autoplay=0, thus:

    <li class="" data-thumb-alt="" style="width: 570px; margin-right: 0px; float: left; display: block;">
        <iframe id="player_0" src="http://www.youtube.com/embed/8A6OqHd6dPY?autoplay=0" width="600" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
    </li>
    <li data-thumb-alt="" class="flex-active-slide" style="width: 570px; margin-right: 0px; float: left; display: block;">
        <iframe id="player_1" src="http://www.youtube.com/embed/8A6OqHd6dPY?autoplay=0" width="600" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
    </li>

Now, if this is still starting the video is because it is occurring when you are clicking the slide to the next or previous maybe and it is not a matter of automatico, it is actually started by "click", even if the intention is to browse the slide, this soon has to be adjusted with JS+CSS to block certain actions force others and in iframe still have to apply the parameter &origin=URL_DO_SEU_SITE, but I’m not going to make an example of this because it might not even be your problem.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.