NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Popup youtube video

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
werixon
Člen
Avatar
werixon:19.7.2019 23:45

Ahoj, potřeboval bych nasměrovat na nějakou knihovnu nebo postup.....pot­řebuji udělat na stránce tlacitko. Když na tlačítko kliknu, tak vyskočí youtube video.....něco jako pop-up okno. Nesmí dojít k přesměrování na youtube. A nejlíp, kdyby to bylo na fullscreen.
Díky za typy.

Zkusil jsem: jQuery to neumí......zkoušel jsem dialog, ale to není ono.

 
Odpovědět
19.7.2019 23:45
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na werixon
Jaroslav Smrž:20.7.2019 8:07

Ahoj, z již hotových řešení bych použil Bootstrap Modal, do kterého vložíš YouTube plugin. Odkaz: https://getbootstrap.com/…nents/modal/ Plugin bude mít možnost fullscreenu, jako je tomu na YouTube u každého videa. Další teoretickou možností by bylo vložit plugin do LightBoxu na obrázky, ale nikdy jsem to nezkoušel, takže nevím, zda to bude fungovat.

Nahoru Odpovědět
20.7.2019 8:07
/* Life runs on code */
Avatar
Milan Turyna
Tvůrce
Avatar
Milan Turyna:20.7.2019 9:54

Ahoj, sestavil jsem něco takového: http://turyna.eu/…screen/view/

<style>
body {
  font-family: 'Arimo', sans-serif;
}

iframe {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
}

/*****************************/

.overlay {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background: rgba(0,0,0,0.3);
  display: block;
  position: absolute;
  top: 10%;
  left: 30%;
}

.overlay h1 {
  text-align: center;
  padding-top: 100px;
  color: #fff;
  font-family: inherit;
}

.overlay p{
  text-align: center;
  width: 80%;
  margin: 0 auto;
  color: #fff;
  font-family: inherit;
  margin-bottom: 20px;
  transform-origin: top 0 left 0;
}

.overlay a {
  color: #fff;
}

@-webkit-keyframes shake {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
        10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
        20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
        30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
        40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
        50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
        60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
        70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
        80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
        90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
        100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}


.overlay:hover,
.overlay:focus{
    -webkit-animation: shake 0.8s linear infinite;
    animation: shake 0.2s linear infinite;

}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: transparent;
  margin: auto;
  padding: 20px;

  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>

<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
<iframe width="420" height="315" src="//www.youtube.com/embed/kGATOSo5lkU?autoplay=1" frameborder="0" allowfullscreen></iframe>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

ale musíš si to dát ještě do své podoby, jinak je to kod z w3schools a ještě nějakej z codepen.io

Editováno 20.7.2019 9:55
Nahoru Odpovědět
+1
20.7.2019 9:54
Řeš pouze to, co dokážeš ovlivnit.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.