Youtube video automatisch afspelen als je er naar scrollt.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Snelle Jaap

Snelle Jaap

21/11/2014 10:04:09
Quote Anchor link
Ik gebruik de youtube api op een site, die laad dus een iframe in.

Nu wil ik graag dat de video pas afspeelt als de hele video in het scherm zichtbaar is (als je er naar scrollt dus).

Weet iemand hoe ik dat voor elkaar kan krijgen?

Dit is het deel van de site waar de video staat:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!-- Home -->
    <section id="home" class="container relative pattern-black">
        <!-- Ful Screen Home -->
        <div id="fullscreen" class="fullscreen pattern-black soft-bg-1 z-1">
            <!-- Video -->
            <div id="P2" class="player video-container" data-property="{videoURL:'gpSSGCf9nHY',containment:'#fullscreen',autoPlay:true, showControls:true, mute:false, startAt:0, opacity:0.2}"></div>
            <!-- End Video -->
        </div>
        <!-- End Ful Screen Home -->

        <!-- Home Elements v2 -->
        <div class="home-elements">
            <!-- Home Inner -->
            <div class="home-inner v2 t-center">

                <!-- Home Text Slider -->
                <div class="home-text-slider relative">
                    <div class="text-slider clearfix">
                        <!-- Home Text Slides -->
                        <ul class="home-texts clearfix t-center semibold">
                            <li class="slide white uppercase">we are create awesome themes!</li>
                            <li class="slide white uppercase">We are creative designers</li>
                            <li class="slide white uppercase">we love to designing</li>
                        </ul>
                        <!-- End Home Text Slides -->
                        <!-- Home Fixed Text -->
                <h1 class="home-fixed-text t-center">Welcome to <span class="gray-tone">North!</span> We love to design. We are happy with <span class="gray-tone">you are !</span></h1>
                    </div>
                </div>
                <!-- End Home Text Slider -->

                <!-- Home Button -->
                <a href="#" target="_blank" class="home-button-1 uppercase oswald semibold gray">
                    purchase
                </a>

                <!-- Home Button -->
                <a href="#about" class="scroll home-button-1 uppercase oswald semibold gray">
                    read more
                </a>
            </div><!-- End Home Inner -->
        </div><!-- End Home Elements -->
    </section><!-- End Home Section -->


En dit is het js bestand waar de custom controls e.d. mee worden geladen, en de iframe zelf.


http://jsfiddle.net/55omdr0o/
 
PHP hulp

PHP hulp

29/03/2024 08:02:58
 
Frank Nietbelangrijk

Frank Nietbelangrijk

21/11/2014 13:17:02
Quote Anchor link
Dit script is ontworpen om op de achtergrond van je pagina af te spelen

Ik heb wel een quick and dirty trick om een video in een iframe te starten: http://codepen.io/anon/pen/QwwVEL

Overigens maak ik hier gebruik van imakewebthings/jquery-waypoints om een event te verkrijgen als je naar de video toe scrollt.
Gewijzigd op 21/11/2014 13:30:22 door Frank Nietbelangrijk
 
Snelle Jaap

Snelle Jaap

21/11/2014 13:30:16
Quote Anchor link
Frank Nietbelangrijk op 21/11/2014 13:17:02:
Dit script is ontworpen om op de achtergrond van je pagina af te spelen


Klopt, maar het is de achtergrond van een section. Dan moet het toch mogelijk zijn om de video pas af te spelen als je naar die section scrollt/hem helemaal inbeeld hebt.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

21/11/2014 13:35:44
Quote Anchor link
Lees even de docs: https://github.com/pupunzi/jquery.mb.YTPlayer/wiki

External methods

$.fn.playYTP()
Let you play the video.
For example:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<button onclick="$('#bgndVideo').playYTP()">play</button>



als je zo een knop werkend krijgt dan kun je dit ook met imakewebthings/jquery-waypoints (zie vorige post) gebruiken.

Oja, In de docs staat ook hoe je in de settings kunt opgeven dat ie niet direct moet gaan spelen.
Gewijzigd op 21/11/2014 13:38:50 door Frank Nietbelangrijk
 
Snelle Jaap

Snelle Jaap

21/11/2014 13:47:23
Quote Anchor link
Kun jij uit mijn code halen wat precies de class name is van het iframe? Op internet lees ik dat het simpelweg 'iframe' is, maar ik geloof dat het 'mb_YTVPlayer' is.

Wat ik hier moet invullen bedoel ik:

<button onclick="$('class').playYTP()">play</button>

Die knop zet ik trouwens in dat stuk html wat ik bijgevoegd toch?

Automatisch afspelen heb ik al uitgezet.
Gewijzigd op 21/11/2014 13:52:27 door Snelle Jaap
 
Frank Nietbelangrijk

Frank Nietbelangrijk

21/11/2014 14:11:46
Quote Anchor link
<button onclick="$('#fullscreen').playYTP()">play</button>

of

<button onclick="$('#P2').playYTP()">play</button>

denk ik. Het probleem is dat wat je boven laat zien niet helemaal compleet is. Er mist nog een klein stukje javascript waarmee je de player aan het element koppelt.

Ja die knop kun je gewoon ergens in je body zetten.
 
Snelle Jaap

Snelle Jaap

21/11/2014 14:20:11
Quote Anchor link
#P2 is het inderdaad, thanks.

Even kijken of ik het met je gestuurde jquery plugin aan de praat kan krijgen.

Toevoeging op 21/11/2014 14:25:50:

Ik heb waypoints.min.js in mn js map staan.

Zoiets moet het worden dan denk ik?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<script>
    $('#P2').waypoint(function() {
      $('#P2').playYTP()
    });
</script>


Alleen werkt dit nog niet.

Hier staat nu #P2 als waypoint, met home (de section naam) werkt hij ook niet.

Misschien nog handige info:

Uncaught TypeError: Cannot read property 'playVideo' of undefined

Dat geeft die aan in de console als ik de pagina laad.
Gewijzigd op 21/11/2014 16:08:46 door Snelle Jaap
 
Frank Nietbelangrijk

Frank Nietbelangrijk

21/11/2014 16:48:46
Quote Anchor link
Heb je hem wel in de .ready() functie staan?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
$(function() {
    $('#P2').waypoint(function() {
        $('#P2').playYTP();
    });
});
 
Snelle Jaap

Snelle Jaap

24/11/2014 09:36:12
Quote Anchor link
Zo werkt hij inderdaad, thanks!

Zeker een plugin om te onthouden dat waypoints.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.