September discount week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
50 % bodů zdarma na online výuku díky naší Slevové akci!
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ž
Redaktor
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 */
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Milan Turyna
Redaktor
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
20.7.2019 9:54
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.