hallo Forum-Mitglieder,
Für wen es interessiert: Ich habe für eine von mir betreuten Homepage
vor kurzem ein Video Dropdown-Box Script erstellt.
Das Script im Einsatz kann man sich hier anschauen.
Die wichtigsten Features sind:
-- Man kann über Dropdown aus einer Liste von Videos das gewünschte Video selektieren.
-- Jeden Tag in der Woche wird automatisch ein anderes Video als erstes gezeigt.
-- Auf Wunsch kann man auch Videos über eine rückwerts oder vorwärts Taste selektieren.
-- Youtube Matrix-Auswahl am Ende ist nicht eingeschaltet.
Würde mich freuen über evt. Verbesserungsvorschläge, Ergänzungen, usw.
<style> .txt3 { font-weight: normal; font-size: 100%; font-weight: bold; font-family: Verdana; } .txt4 { font-weight: normal; font-size: 100%; font-weight: bold; font-family: Verdana; margin-top: 2px; margin-left: 0px; color:#000000; background: #F3FED0; border: 2px solid #92AD34; } .wrap { text-align:center } #div1 { display: inline-block; border: 2px solid red; float: left; } #div2 { display: inline-block; text-align: center; border: 0px solid green; } #div3 { display: inline-block; border: 2px solid blue; position: relative; float: right; } select.center { position: relative; display: inline-block; } input.right { position: relative; float: right; } </style> <script language=javascript> function setIframeSource() { //do whatever you're doing ; } function nextTiles(i) { var e = document.getElementById("overlaySelector"); e.selectedIndex +=i ; //loop-around from the top or bottom depending on increment/decrement if(e.selectedIndex == -1) { if(i>0) e.selectedIndex = 0; else e.selectedIndex = e.length - 1; } setIframeSource(); //with the now updated selected option, //do whatever you were doing when the user manually chooses something in the dropdown } var theSelect,theIframe; var today = new Date(), number_of_day = today.getDay(); $(document).ready(function() { //var today = new Date(); //var n = today.getDay(); theSelect = document.getElementById('overlaySelector'); theIframe = document.getElementById('myIframe'); theUrl = theSelect.options[number_of_day].value; theIframe.src = theUrl; }); function setIframeSource() { var theUrl; if ( theSelect.selectedIndex > 0) { theUrl = theSelect.options[theSelect.selectedIndex].value; } else { theUrl = theSelect.options[number_of_day].value; } theIframe.src = theUrl; } </script> <iframe id="myIframe" src="http://www.alumnei.nl/images/learninglane.jpg" frameborder="0" marginwidth="0" marginheight="0" width="100%" height="373" related="0" allowfullscreen scrolling="no"></iframe> <div class="wrap"> <div id="div1"><input type="button" value="vorige" onClick="nextTiles(-1)"></div> <div id="div2"> <form id="form1" method="post"> <label class="txt3"> De video-testimonial van: <select class="txt4" id="overlaySelector" onchange="setIframeSource()"> <option value="http://www.alumnei.nl/images/learninglane.jpg">... maak hier je keuze ...</option> <option value="https://www.youtube.com/embed/tP4i7CiMHh4?rel=0&fs=0&autoplay=1&modestbranding=1">Monique van Neutegem</option> <option value="https://www.youtube.com/embed/Bx5Np1wIXYs?rel=0&fs=0&autoplay=1&modestbranding=1">Marjon Heintjes</option> <option value="https://www.youtube.com/embed/J-NChlqVAgY?rel=0&fs=0&autoplay=1&modestbranding=1">Els de Groot</option> <option value="https://www.youtube.com/embed/r_UB0rTH7SA?rel=0&fs=0&autoplay=1&modestbranding=1">Arthur Alferink</option> <option value="https://www.youtube.com/embed/t66K_g-fkFY?rel=0&fs=0&autoplay=1&modestbranding=1">Monique Fortuin</option> <option value="https://www.youtube.com/embed/8DC-3DiVL4A?rel=0&fs=0&autoplay=1&modestbranding=1">Erna Slangen</option> <option value="https://www.youtube.com/embed/8Gvu_lgZZAM?rel=0&fs=0&autoplay=1&modestbranding=1">Stephanie de Witte</option> </select> </label> </form> </div> <div id="div3"><input type="button" class="right" value="volgende" onClick="nextTiles(1)"></div> </div>