NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
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
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel: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
Nahoru Odpovědět
20.7.2019 9:54
Neaktivní uživatelský účet
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.