No controls in BSS for videos using my code

I had to alter the code a bit to get the features I needed (they insisted on autoplay so had to add it), but .....

After adding the

?&autoplay="0"

to the end of the file name as suggested by YouTube, the controls do not show for but a second or 2, and they are not functional ONLY within BSS app. On the site it seems to work fine so far as I can tell using the preview browser, haven't uploaded it yet, but I assume it will be fine.

Anyways, this is causing a horrible issue for me if music has to play, no matter what kind lol, and I cannot shut it off in the app.

This is in BSS bootstrap version 3.3.7, I haven't tested in 4 yet, not too comfy in that version yet, still playing with it a lot. :) Here's the code I used so you can verify it is correct or if I'm missing something (tried adding controls="1" but it does the same thing).

This is added as Custom Code. I tried using the video component, but it wasn't responsive, nor would it respond to responsive settings so I gave up lol. Here's the code that's working so far on the website:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/cjLpB38mK1A?&autoplay=0"></iframe>
</div>

Ok updating this because I just uploaded the video and the controls don't work on there either unless you have it the browser at Medium size or larger. Once you go below that and it resizes the page the controls no longer show up no matter what you do. I'm trying this on a live site right now, but I think I'm going to have to upload all this to a test site to get a good video setup working unless someone has a clue that I'm missing lol.

First, If you are wanting autoplay, you have to set that to 1. 0 is typically use for disable/no/false and 1 is typically used for enable/yes/true.

Second, your url is wrong change https://www.youtube.com/embed/cjLpB38mK1A?&autoplay=0 to https://www.youtube.com/embed/cjLpB38mK1A?autoplay=0 the first property after the ? does not need the & but all other properties after that do.

Third, browser don't like mobile devices to autoplay video that is typically disabled natively in the browser I believe.

Saj

oops sorry, I did have it at =1, but had changed it to 0 to stop it from playing lol, copied the code and forgot that it was 0, sorry bout that.

I removed the & symbol, but that didn't affect anything either. Was only there because that's the code that YouTube suggested when I went to get more information on how to do autoplay.

Other than that, yeah, I'm totally aware of the autoplay thing not being a good thing, but .... that's what they want and they won't be talked out of it unless I cannot get it to work lol.

So, I'm uploading the site right now, will be a bit but I'll post when I have it on the temp location so I can test better there. Thanks much Saj for trying! I had my fingers crossed and hoped that's all it was lol.

Sorry I didn't get to have this posted as I had to leave for a while quickly lol. Here's a link to the test site if someone could look to see if I have something done incorrectly for the setup.

I tested it on my Galaxy S8 phone last night, and although when testing in the browser (shrinking the browser window manually) it didn't give the controls at all after a couple seconds, on the actual phone it shows the play button, but it doesn't let you click it at all. Just acts like an inactive image. Haven't had this happen before, am looking through some other client sites to see if I have any newer ones with videos on the, (don't think they do though) and if so maybe I'll see what I did there, but this is stumping me, I must have something really stupid wrong that I'm just not seeing lol. User error no doubt lol. Thanks for any assistance you can give here, and of course it will help to determine if it really is a bug/glitch in BSS or just a code error on my part. https://eiwd-tester.work/pgbm-temp/ (sorry for auto play on music/video, but needs to be on for you to see how it works too)

You have several wowslider JS errors, they could be effecting the issue. You need to correct the order of those I think.

I'm going to suggest this order.

<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.combinedScroll.js"></script>
<script src="assets/js/jquery.mousewheel.min.js"></script>
<script src="assets/js/jquery.touchSwipe.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDb0O-dyqQQ_pATdRCM6gkjRvhS6hAsHE"></script>

<script src="assets/js/engine1/wowslider.js"></script>
<script src="assets/js/engine1/wowslider.mod.js"></script>
<script src="assets/js/engine1/script.js"></script>
<script src="assets/js/engine2/wowslider.js"></script>
<script src="assets/js/engine2/wowslider.mod.js"></script>
<script src="assets/js/engine2/script.js"></script>
<script src="assets/js/engine3/wowslider.js"></script>
<script src="assets/js/engine3/wowslider.mod.js"></script>
<script src="assets/js/engine3/script.js"></script>
<script src="assets/js/engine10/wowslider.js"></script>
<script src="assets/js/engine10/script.js"></script>
<script src="assets/js/engine10/wowslider.mod.js"></script>

<script src="assets/js/myscripts.js"></script>

If you open up the wowslider.mod.js you'll see this line in there, which means the mod JS should go between it's wowslider.js and it's scripts.js

<script type="text/javascript" src="engine1/wowslider.mod.js"></script> (after "wowslider.js", before "script.js")

That might get rid of the wowslider JS related errors which might help figuring out why clicking the video doesn't work.

In fact I'm of the thought whether or not you need all of the wowslider stuff as most of the js files are identical to each other. I'll see if I can better determine that.

Saj

Thanks Saj, I'll take a look at that, this is one of the first sites i added a WowSlider to so it's most definitely a possibility that I did that. Once I redo it all the JS files won't even be part of the galleries, they will just be referenced in the scripts on each page so that will probably clean that all up as well. I've needed to get to this a while now lol, always seems we get tied up in the new things and push the old stuff aside ... :P

Once I do that I'll let you know so you can see what it looks like at that time. Thanks again!

So after everything, the simple thing that makes it clickable is...

.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
    z-index: 100;
}

Just doing that makes the video clickable. I don't know what it is that you have that's makes it need that.

Ok, after more digging... your aside is overlapping the majority of your content.

And after more trial and error, change <div class="col-md-3" id="aside"> to <div class="col-md-3 col-xs-12" id="aside">. The CSS above isn't needed.

Also if you have something like col-sm-12 col-xs-12 you don't need the col-sm-12 because col-xs-12 applies to everything XS and above.

As for your JS, the wowslider errors are related to the fact the engines 3/10 aren't even on the page so it's trying to load something that it can identify exists on the page.

For some JS things it's better to first write a script that checks for the existence of something before trying to execute upon something that may or may not exist. So see if you have set wowslider to not autoplay, and then write some JS code to check for the wowslider-container[X] element then if it exists then have your JS code trigger the play function of that wowslider if have the option with wowslider.

Saj

Thank you Saj! You're such a life saver around here! That fixed it all up. I've also cleaned up all of the galleries so they should be much better now too. I'll get that all changed over on the live site tomorrow, but on the test site it's all working now as it should be. Thanks so much for your help!

Your welcome, glad I could help :)

Saj