Youtube video automatisch afspelen als je er naar scrollt.
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)
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
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 -->
<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/
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
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.
External methods
$.fn.playYTP()
Let you play the video.
For example:
Code (php)
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
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
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.
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)
1
2
3
4
5
2
3
4
5
<script>
$('#P2').waypoint(function() {
$('#P2').playYTP()
});
</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
Code (php)
1
2
3
4
5
2
3
4
5
$(function() {
$('#P2').waypoint(function() {
$('#P2').playYTP();
});
});
$('#P2').waypoint(function() {
$('#P2').playYTP();
});
});
Zeker een plugin om te onthouden dat waypoints.