Video onload

« Older   Newer »
 
  Share  
.
  1. MatDev++
        +1   Like  
     
    .

    User deleted


    Video onload è uno script che ti permette di mettere un video da Youtube quando si apre il forum. Ecco un esempio.

    1.
    Andate in Amministrazione --> Grafica --> Codice HTML e inserire:
    CODICE
    <div id="myModal" class="modal">

    <div class="modal-content">

    <span class="close">x</span>


    </div>

    </div>
    <script type="text/javascript">
    var modal=document.querySelector('#myModal'),
    close=document.querySelector(".close");
    window.onload = function() {
    modal.style.display="block";
    }
    close.onclick=function(){
    modal.style.display = "none";
    document.querySelector(".modal-content>iframe").src="";
    }
    setTimeout(function(){
    close.style.display = "block" }, 8000);
    </script>


    Sotto x dovete mettere l'iframe del video, come? Andate su Youtube, prendete il video, cliccate Share sotto il titolo e copiate il codice in Embed.

    Esempio:
    CODICE
    <div class="modal-content">

    <span class="close">x</span>

    <iframe width="560" height="315" src="https://www.youtube.com/embed/tjRobxs6z24" frameborder="0" allowfullscreen></iframe>

    </div>


    2.Andare in Amministrazione --> Grafica --> CSS

    E incollare il seguente codice:
    CODICE
    .modal {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)}

    /* Modal Content */
    .modal-content {margin: auto;
    padding: 20px;
    width: 50%}

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

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


    Cosi avrete il vostro script pronto.

    Prossimamente rilascierò un generatore per rendere il tutto più semplice e personalizzabile.
     
    .
0 replies since 4/9/2016, 16:30   411 views
  Share  
.