Witam,
tak zupełnie niekomercyjnie i tylko dla przyjemności oglądających tworzę sobie stronkę do podglądu bocianów z kamer na żywo.
Na stronie mam dwa iframe youtube których zawartość mogę zamieniać miejscami po kliknięciu na przycisk. To jednak powoduje ponowne wczytywanie wideo w tych ramkach.
Czy dałoby się to zrobić tak aby po kliknięciu na przycisk "zamień kamery" wideo nie wczytywało się a po prostu ramki zamieniały się miejscami zmieniając swoje położenie i rozmiary?
Moja stronka testowa to : www.bociany-online.pl/index_test.php
Nie jestem programistą tylko coś tam sobie dłubię tak że proszę o pomoc i wyrozumiałość...
Obecnie kod strony wygląda tak:
<body>
<div id="lewy" style="font-family:arial;color:white;font-size: 0.85vw;">
<iframe width="362" height="204" id="box1" src="https://www.youtube.com/embed/live_stream?channel=UCDYArHFJDJFjQK8WdmXJp4w&vq=hd1080&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&iv_load_policy=3&showinfo=0&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="centrum" style="padding-left: 2px;">
<div id='cssmenu'; style="z-index: 200;">
<ul>
<li>
<button id="button1" >Zamień kamery</button>
</li>
</ul>
</div>
<div id="prawy" class="container" style="z-index: 100">
<iframe id="box2" style="position:relative; width: 100%; z-index: 100; padding-bottom: 0.7vh;" src="https://www.youtube.com/embed/live_stream?channel=UC50cXzo7MI0J2ssljVJP_eQ&autoplay=1&enablejsapi=1&showinfo=0&rel=0&controls=2&showsearch=0&iv_load_policy=3&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="video"></iframe>
</div>
</div>
</body>
<script>
var button = $("#button1");
var iframe1 = $("#box1");
var iframe2 = $("#box2");
button.on("click", function() {
if (iframe1.attr('src') == "https://www.youtube.com/embed/live_stream?channel=UC50cXzo7MI0J2ssljVJP_eQ&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0") {
iframe1.attr('src', "https://www.youtube.com/embed/live_stream?channel=UCDYArHFJDJFjQK8WdmXJp4w&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0");
iframe2.attr('src', "https://www.youtube.com/embed/live_stream?channel=UC50cXzo7MI0J2ssljVJP_eQ&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0");
} else {
iframe1.attr('src', "https://www.youtube.com/embed/live_stream?channel=UC50cXzo7MI0J2ssljVJP_eQ&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0");
iframe2.attr('src', "https://www.youtube.com/embed/live_stream?channel=UCDYArHFJDJFjQK8WdmXJp4w&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0");
}
})
</script>
</html>