PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
S

Youtube video automatisch afspelen als je er naar scrollt.

Door Snelle Jaap op 21-11-2014 10:04
2.357 views
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:


<!-- 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/
S
Snelle Jaap
21-11-2014 13:30
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
21-11-2014 13:35 gewijzigd op 21-11-2014 13:38
Lees even de docs: https://github.com/pupunzi/jquery.mb.YTPlayer/wiki

External methods

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


<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.
S
Snelle Jaap
21-11-2014 13:47 gewijzigd op 21-11-2014 13:52
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.
Frank Nietbelangrijk
21-11-2014 14:11


<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.
S
Snelle Jaap
21-11-2014 14:20 gewijzigd op 21-11-2014 16:08
#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?


<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.
Frank Nietbelangrijk
21-11-2014 16:48
Heb je hem wel in de .ready() functie staan?


$(function() {
	$('#P2').waypoint(function() {
		$('#P2').playYTP();
	});
});
S
Snelle Jaap
24-11-2014 09:36
Zo werkt hij inderdaad, thanks!

Zeker een plugin om te onthouden dat waypoints.

Reageren

Inloggen om te reageren