JAVA 2 x youtube wideo na stronie + zmiana położenia po kliknięciu

0

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>
2

Filmik w iframe zostaje ponownie załadowany ponieważ zmieniasz atrybut src i przeglądarka traktuje to jak całkowicie nowy filmik, który musi jeszcze raz załadować.

Powinieneś zmieniać jakiś styl CSS, który odpowiadałby za zmianę pozycji iframe.

Jeśli znasz flexboxa to możesz zrobić coś takiego

<div class="row">
  <iframe ... />

  <iframe ... />
</div>

<button>Zamień wideo</button>

.row {
  display: flex;
}

.reverse {
  flex-direction: row-reverse;
}

const button = document.querySelector('button');
const row = document.querySelector('.row');

button.addEventListener('click', () => {
  row.classList.toggle('reverse');
});

Nie testowałem rozwiązania, ale powinno zadziałać.

0
Xarviel napisał(a):

Filmik w iframe zostaje ponownie załadowany ponieważ zmieniasz atrybut src i przeglądarka traktuje to jak całkowicie nowy filmik, który musi jeszcze raz załadować.

Powinieneś zmieniać jakiś styl CSS, który odpowiadałby za zmianę pozycji iframe.

Jeśli znasz flexboxa to możesz zrobić coś takiego

<div class="row">
  <iframe ... />

  <iframe ... />
</div>

<button>Zamień wideo</button>

.row {
  display: flex;
}

.reverse {
  flex-direction: row-reverse;
}

const button = document.querySelector('button');
const row = document.querySelector('.row');

button.addEventListener('click', () => {
  row.classList.toggle('reverse');
});

Nie testowałem rozwiązania, ale powinno zadziałać.

@Xarviel: Zrobiłem tak jak podpowiedziałeś i... DZIAŁA!! :) a czy mógłbyś mi jeszcze pomóc jak to dodać na stronie głównej aby layout mi się nie rozjeżdżał po zaimplementowaniu Twojego rozwiązania? strona główna to oczywiście www.bociany-online.pl

0

@Xarviel: konkretnie problem mam taki że u mnie te iframe są w dwóch różnych div'ach, w pierwszym mogę dodać class="row" ale w drugim jest już określona class="container" . Czy mam to pozmieniać w pliku css?

W pliku sytli wygląda to tak:

.container {
    position: relative;
    width: calc(100vw - 380px);
    height: 0;
    padding-bottom: 0;
}

to do czego dążę to jest na stronie www.bociany-online.pl/index_test2.php

na www.bociany-online.pl/index_test.php działa jak należy tylko layout jest nie taki jak być powinien

w stylach zmieniłem

.row {
  display: flex;
}

na to co było w .container i w drugim div zmieniłem class="container" na class="row"

.row {
  display: flex;
      position: relative;
    width: calc(100vw - 380px);
    height: 0;
    padding-bottom: 0;
}

ale przestało działać - mógłbyś jeszcze raz zerknąć...? :)

<body>
  <div class="row" 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>Zamień kamery</button>
        </li>
		</ul>
	</div>
	
  <div class="row" id="prawy"   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>
</body>

<script>
const button = document.querySelector('button');
const row = document.querySelector('.row');

button.addEventListener('click', () => {
  row.classList.toggle('reverse');
});
</script>

to jest mój style css (pierwotny)

BODY {
  display:flex;
  flex-wrap:wrap;
background: #333;
  margin:0px;
}
 
#button1 {
	height: 2.1vw;
    background: -webkit-linear-gradient(top,#bb2323 0%,#ff0000 100%);
	border: none;
    font-size: 0.93vw;
    color: white;
}
 
#lewy, #prawy {
 /* background-color:red;*/
  width:360px;
  margin:0px;
}
 
#prawy {
 /* background-color:green;*/
  width:auto;
  flex-grow:1;
}

.container {
    position: relative;
    width: calc(100vw - 380px);
    height: 0;
    padding-bottom: 0;
}
.video {
    position: absolute;
    top: 0;
    /*left: 2px;*/
    width: 99.8%;
    height: calc(55.2*(100vw - 360px)/100);
}


.responsive {
  width: calc(100vw - 379px);
  height: auto;
  padding-top: 0.3vw;
}

.row {
  display: flex;
}

.reverse {
  flex-direction: row-reverse;
}

To że to już działa to super. Do pełni szczęścia brakuje jeszcze aby po zamianie wideo przyjmowało pozycję i rozmiar tego wideo na które jest zamieniane.

2

Hmm... na stronie głównej www.bociany-online.pl masz trochę bardziej skomplikowany układ niż w wersji testowej,

Nie wiem, czy jest jakaś inna możliwość zamiany iframe bez przeładowania niż zabawa wyglądem (CSS), bo google innego sposobu mi nie podpowiada, a zamiana atrybutu src powoduje jednak to przeładowanie iframe. Jeśli nie ma to proponowałbym poczytać trochę o display: grid, bo display: flex nie zadziała. bo jest za dużo elementów na stronie i ciężko byłoby na nim przesunąć dwa iframe tak jak chcesz.

https://css-tricks.com/snippets/css/complete-guide-grid/

Musiałbyś odtworzyć obecny wygląd strony, ale w takiej strukturze, tak żeby oba znaczniki iframe byłyby koło siebie

<div class="wrapper">
  <div class="navigation">menu</div>

  <!-- z iframe najlepiej skasować width/height i ustawić to przez CSS -->
  <iframe class="small-video"  ... />
  <iframe class="big-video" ... />

  <div class="column left">lewa kolumna</div>
  <div class="column right">prawa kolumna</div>
</div>

.wrapper {
  display: grid;
  grid-template-areas:
    "small-video navigation"
    "left-column big-video"
    "left-column right-column"
}

.navigation {
  grid-area: navigation;
}

.column.left {
  grid-area: left-column;
}

.column.right {
  grid-area: right-column;
}

.small-video {
  grid-area: small-video;
  /* tutaj jeszcze width + height */
}

.big-video {
  grid-area: big-video;
  /* tutaj jeszcze width + height */
}

W JavaScripcie podmieniamy jedynie klasy na iframe, small-video <--> big-video i odwrotnie big-video <--> small-video

const button = document.querySelector('button');

button.addEventListener('click', () => {
  const smallVideo = document.querySelector('.small-video');
  const bigVideo = document.querySelector('.big-video');
 
  smallVideo.classList.remove('small-video');
  smallVideo.classList.add('big-video');
  
  bigVideo.classList.remove('big-video');
  bigVideo.classList.add('small-video');
});

EDIT: Poprawiłem nazwy klas, bo w kilku miejscach były nieprawidłowe.

0

@Xarviel:

@Xarviel: Dzięki! Podziałam z tym i dam Ci znać odnośnie efektów.

Na tą chwilę zrobiłem tak jak w http://bociany-online.pl/index_test2.php ale niestety coś nie przełącza:

<body>

<div class="wrapper">
  <div class="navigation">menu</div>
  
  <iframe class="small-video" 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>

  <iframe class="big-video" 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 class="column left">lewa kolumna</div>
  <div class="column right">prawa kolumna</div>
  
  <button>Zamień kamery</button>
</div>
</body>

<script>
const button = document.querySelector('button');

button.addEventListener('click', () => {
  const smallVideo = document.querySelector('.small-video');
  
  smallVideo.classList.remove('small-iframe');
  smallVideo.classList.add('big-video');

  const bigVideo = document.querySelector('.big-video');
  
  bigVideo.classList.remove('big-video');
  bigVideo.classList.add('small-iframe');
});
</script>
1

@Sylwek Kajor Pomyliłem nazwy klas, oraz kolejność zmiennych ... xD Tak to jest jak ktoś piszę z pamięci

Jak się przyjrzyj to tam w skrypcie jest najpierw .small-video. ale później przez przypadek pojawia się klasa .small-iframe, której nie mamy ostylowanej. W plikach CSS/JS powinna być jedna wspólna nazwa .small-video.

const smallVideo = document.querySelector('.small-video');
const bigVideo = document.querySelector('.big-video'); // <-- to wcześniej też było w złym miejscu

smallVideo.classList.remove('small-iframe'); // <-- tutaj powinno być .small-video
smallVideo.classList.add('big-video');

bigVideo.classList.remove('big-video');
bigVideo.classList.add('small-iframe'); // <-- i tutaj tak samo .small-video
0

@Xarviel: naniosłem poprawki ale coś jeszcze jest nie tak ponieważ nie przełącza

http://bociany-online.pl/index_test2.php

ps. jak Ty to wstawiasz na forum że kod jest w kolorach?

const smallVideo = document.querySelector('.small-video');
const bigVideo = document.querySelector('.big-video'); // <-- to wcześniej też było w złym miejscu

smallVideo.classList.remove('.small-video'); // <-- tutaj powinno być .small-video
smallVideo.classList.add('big-video');

bigVideo.classList.remove('big-video');
bigVideo.classList.add('.small-video'); // <-- i tutaj tak samo .small-video
1
Sylwek Kajor napisał(a):

ps. jak Ty to wstawiasz na forum że kod jest w kolorach?

Wstawiam go w taki sposób

screenshot-20220522072752.png
Z prawej strony edytora screenshot-20220522075031.png

masz taką ikonkę </>, która za to odpowiada i jeśli oznaczysz prawidłowo język to kolorowanie powinno się pojawić.

A jeśli chodzi o błąd to w metodach add / remove była niepotrzebna kropka na samym początku

smallVideo.classList.remove('.small-video') <-- tak jest źle
smallVideo.classList.remove('small-video') <-- tak jest dobrze

smallVideo.classList.remove('small-video');
smallVideo.classList.add('big-video');

bigVideo.classList.remove('big-video');
bigVideo.classList.add('small-video');

i jak sprawdzam kod HTML, który dodałeś na stronie

<div class="wrapper">
  <div class="navigation">menu</div>

  <iframe class="small-video big-video" ...></iframe>
  <button>Zamień kamery</button>
  <iframe class=".small-video" ...></iframe>

  <div class="column left">lewa kolumna</div>
  <div class="column right">prawa kolumna</div>
</div>

<iframe class="small-video big-video" ...></iframe> to tutaj powinna być tylko jedna klasa small-video, lub big-video, Jeśli w tym drugim iframe oznaczyłeś je jako small-video, to tutaj analogicznie powinno być big-video.

<iframe class=".small-video" ...></iframe> Natomiast tutaj nie powinno być kropki w nazwie klasy

class="moja-klasa"> <- tak jest dobrze
class=".moja-klasa"> <- tak jest źle

0

@Xarviel: Zobacz, w tej chwili jest tak na stronie:

<body>
<div class="wrapper">
  <div class="navigation">menu</div>
  
  <iframe class="small-video" 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>
  
  <button>Zamień kamery</button>
  
  <iframe class="big-video" 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 ></iframe>

  <div class="column left">lewa kolumna</div>
  <div class="column right">prawa kolumna</div>
</div>
</body>

<script>
const smallVideo = document.querySelector('.small-video');
const bigVideo = document.querySelector('.big-video'); 

smallVideo.classList.remove('small-video');
smallVideo.classList.add('big-video');

bigVideo.classList.remove('big-video');
bigVideo.classList.add('small-video'); 
</script>

wydaje mi się że jest tak jak mi przekazałeś? Choć pewnie nie? bo zobacz jak to teraz wygląda: http://bociany-online.pl/index_test2.php
Zamienianie niestety nie działa

2
Sylwek Kajor napisał(a):

wydaje mi się że jest tak jak mi przekazałeś? Choć pewnie nie? bo zobacz jak to teraz wygląda: http://bociany-online.pl/index_test2.php
Zamienianie niestety nie działa

Zamienianie działa raz na samym początku ładowania strony :D
Po wciśnięciu przycisku nic się nie dzieje, bo po prostu niepotrzebnie skasowałeś tamten fragment.

Musisz sprawdzać, co kopiujesz i wklejasz, bo zaznaczyłem Ci jedynie fragment, w którym był błąd bez kopiowania całości po raz kolejny.

const button = document.querySelector('button');

button.addEventListener('click', () => {
  // Ten fragment powinieneś wkleić tutaj
});

czyli powinno nam wyjść coś takiego

const button = document.querySelector('button')

button.addEventListener('click', () => {
  const smallVideo = document.querySelector('.small-video');
  const bigVideo = document.querySelector('.big-video'); 

  smallVideo.classList.remove('small-video');
  smallVideo.classList.add('big-video');

  bigVideo.classList.remove('big-video');
  bigVideo.classList.add('small-video'); 
});

EDIT:

Tutaj masz jeszcze link do przykładu online https://stackblitz.com/edit/js-n9w5vd?file=index.html
Trzeba będzie jeszcze poprawić kod CSS.

0

@Xarviel: Dzięki wielkie! teraz działa super! Sorry ale tak jak pisałem w poscie ja nie jestem programistą i to co mi podajesz to tylko tak ogólnie wiem o co chodzi... ale szczegółów już nie. Pomęczę css i dam znać jakie efekty ale to wieczorem.

0

@Sylwek Kajor: Powiedz jak mogę Ci się odwdzięczyć za pomoc? Wszystko działa super - dokładnie tak jak chciałem. Wcześniejsza wersja też była utworzona z pomocą ludzi z forum 4programers ale nikt nie umiał zaproponować rozwiązania takiego jak Ty mimo, że o tym też była już wcześniej mowa! Tak że WIELKIE DZIĘKI i szacun za Twoją wiedzę i życzliwość.

Zobacz efekty: http://bociany-online.pl/index_test2.php - jeszcze drobna kosmetyka i wrzucam na główną...

1 użytkowników online, w tym zalogowanych: 0, gości: 1