[JavaScript] Przycisk wyciszenia na stronie z filmem w tle Opcje

[mbaton]

Witam. Dodałem na swojej stronie film w tle, korzystając z tutorialu http://grafmag.pl/artykuly/strona-internet...em-wideo-w-tle/
Nie mogę ogarnąć jak zamieścić ten przycisk wyciszenia na swojej stronie. Nie potrafię tego cssa dostosować do swojej stronki. Niech będzie on gdziekolwiek, żeby się tylko pojawił, z położeniem już sobie poradzę - mam nadzieję Dzięki wielkie!
http://ffstudiofilm.pl/

[sadistic_son]

Pokombinuj z wartościami w tych dwóch class'ach:

[HTML] pobierz, plaintext 
    #wrapper .icons .icon.mute {
            width: 9px;
            background-position: -122px 0px;
        }
 
        #wrapper .icons .icon.sound {
            width: 17px;
            background-position: -143px 0px;
        }
[HTML] pobierz, plaintext 

Pewnie przycisk gdzieś jest tylko niewidoczny.
Albo zamiast tego

[HTML] pobierz, plaintext 
                <div class="right">
                    <a href="#" id="video_button_mute"><span class="icon sound">Wycisz</span></a>
                </div>
[HTML] pobierz, plaintext 

wklej np. takie coś na próbę:

[HTML] pobierz, plaintext 
                <div>
                    <a href="#" ><span>Wycisz</span></a>
                </div>
[HTML] pobierz, plaintext 

A najlepiej to naduś F12 w przeglądarce i wyszukaj ten element (Wycisz) i zobacz co jest nie tak. Może się np. okazać, że go w ogóle nie masz.

Ten post edytował sadistic_son 7.05.2015, 13:03:17

[mbaton]

Dzięki szefie!

edit: co prawda przycisk się pojawił, ale nie działa. Pomożesz raz jeszcze? Nie mam siły już do tego, chętnie bym to komuś zlecił

Ten post edytował mbaton 8.05.2015, 17:08:33

[IProSoft]

Sprawdziłem na FF i przycisk owszem działa ale nie jest widoczny.

Masz podany zły img w klasie #wrapper .icons a .icon

[CSS] pobierz, plaintext 
url("../img/vimeo.png") no-repeat scroll left top transparent
[CSS] pobierz, plaintext 

Ten post edytował IProSoft 8.05.2015, 17:21:40

[mbaton]

To był przykładowy img podany żeby sprawdzić czy w ogóle ten przycisk się pojawi, a taki img faktycznie istnieje i jest w katalogu, więc raczej powinien się pokazać tak czy inaczej. Problem z pojawieniem się przycisku rozwiązała zmiana/usunięcie atrybutu class w tym span. Lecz przycisk nie reaguje na kliknięcie, zmieniłem jeszcze

[HTML] pobierz, plaintext 
        <script>
            $(function() {
                var $video = $('#video');
 
                $('#video_button_mute').on('click', function(e) {
                    var $this = $(this), $icon = $('.icon', $this);
 
                    e.preventDefault();
 
                    if ($video.prop('muted')) {
                        $video.prop('muted', false);
 
                        $icon.removeClass('mute').addClass('sound');
                    } else {
                        $video.prop('muted', true);
 
                        $icon.removeClass('sound').addClass('mute');
                    }
                });
            });
        </script>
[HTML] pobierz, plaintext 

3cią linijkę z #bg na #video, bo chyba do tego się odwołuje w moim przypadku, ale to też tylko moje domysły;d

[IProSoft]

Ja buttona nie widzę, zrób najpierw widoczny przycisk, dalej będziemy mysleć :-)