Předvánoční slevová akce PHP týden
Pouze tento týden sleva až 80 % na PHP e-learning!
Využij předvánočních slev a získej od nás 20 % bodů zdarma! Více zde
Avatar
werixon
Člen
Avatar
werixon:19. července 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. července 23:45
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na werixon
Jaroslav Smrž:20. července 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. července 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. července 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. července 9:55
 
Nahoru Odpovědět
20. července 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.