[Javascript] Selezione dinamica video

anto4392 · 23 Mag 2017

Salve a tutti,

ho creato una pagina html con una serie di article contenenti video. Vorrei creare un menù a tendina per selezionare solo determinate categorie (ad esempio, solo i video di giocoleria)

Come posso fare?

Vi riporto il codice della pagina

Codice:

<!DOCTYPE html>
  <html lang="it">
    <head>
    <title>Foto</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->



    
    </head>
    
        <body>

      
        <!--Header-->
        
        <header>
        
        
        <nav class="social">
                    <ul>
                        <li><a href="#"class="fa fa-facebook"></a></li>
                        <li><a href="#" class="fa fa-twitter"></a></li>
                        <li><a href="#" class="fa fa-instagram"></a></li>
                        <li><a href="#" class="fa fa-youtube"></a></li>

                    </ul>
        </nav>
        
        <div class="form-top">
        <form>Registrati alla Newsletter
            <input type="email">
            <input type="submit" id="submit">
            </form>
        </div>
        
        <img src="image/banner.jpg" class="small" alt="logo"/>
            
            
        <!--Menu di navigazione-->
        <div class="topnav" id="myTopnav">
        <a href="index.html">Home</a>
        <a href="#">Progetto</a>
        <a href="iniziative.html">Iniziative</a>
        <a href="#">News</a>
        <a href="#">Foto e video</a>
        <a href="#">Come partecipare</a>
        <a href="#">Registrati</a>
        <a href="#">Contatti</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
        </div>
        
        
        </header>
        
        <div id="content">


<div class="responsive">
  <div class="gallery">
    <video width="600" height="600" controls>
  <source src="video/giocoleria1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Circo Inzir Torino 20 maggio 2016</div>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
    </div>

</div>


<div class="responsive">
  <div class="gallery">
 <video width="600" height="600" controls>
  <source src="video/giocoleria2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Circo Inzir Torino 20 maggio 2016</div>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  </div>
 
</div>

<div class="responsive">
  <div class="gallery">
 <video width="600" height="600" controls>
  <source src="video/giocoleria4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Circo Inzir Torino 20 maggio 2016</div>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
 <video width="600" height="600" controls>
  <source src="video/giocoleria5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Circo Inzir Torino 20 maggio 2016</div>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  </div>
</div>

<div class="clearfix"></div>

<div class="responsive">
  <div class="gallery">
 <video width="600" height="600" controls>
  <source src="video/giocoleria6.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Circo Inzir Torino 20 maggio 2016</div>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
 <video width="600" height="600" controls>
  <source src="video/giocoleria7.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Circo Inzir Torino 20 maggio 2016</div>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

  </div>
</div>

<div class="responsive">
  <div class="gallery">
 <video width="600" height="600" controls>
  <source src="video/giocoleria8.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Circo Inzir Torino 20 maggio 2016</div>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

  </div>
</div>

<div class="responsive">
  <div class="gallery">
 <video width="600" height="600" controls>
  <source src="video/giocoleria9.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Artisti in Piazza 2017-Pennabilli</div>
  <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

  </div>
</div>

<div class="clearfix"></div>



                </div>
        

        <!--Footer-->
        <footer>
        <p>FNAS - federazione nazionale arti in strada | sede legale: Via di Villa Patrizi 10, 00161 Roma - C.F. 96395280587 - P.Iva 07510401008</p>
        </footer>
        
        <script>
<!--Rende la topnav responsive-->
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>
</body>
  </html>

Cerca

Cerca

[Javascript] Selezione dinamica video

anto4392

Nuovo Utente

Discussioni simili