Galleria video

**Jill Valentine** · 24-02-2011, 19:28

Salve a tutti, spero di postare nel posto giusto.
Avrei un problema, vorrei mettere una sorta di galleria video, ma semplicissima! I video che devo prendere si trovano su youtube. Qualcuno può aiutarmi? Grazie in anticipo

**carlomarangoni** · 24-02-2011, 19:36

Originariamente inviato da Jill Valentine
Salve a tutti, spero di postare nel posto giusto.
Avrei un problema, vorrei mettere una sorta di galleria video, ma semplicissima! I video che devo prendere si trovano su youtube. Qualcuno può aiutarmi? Grazie in anticipo

Basterebbe una serie di link ai video di youtube, altrimenti spiega come la vuoi fare

**Jill Valentine** · 25-02-2011, 10:25

Mmmm una semplice galleria, in pratica un riquadro a sinistra dove carica il video e uno a destra dove c'è l'elenco dei video da scegliere. La cosa importante è che se clicco sul video che voglio vedere questo si apre nel box di sinistra e non in una nuova pagina....
Non vorrei usare gli iframe o cose del genere, non c'è un lettore con playlist da poter utilizzare?

**graffithouse** · 25-02-2011, 10:42

ed usare ajax?

**Jill Valentine** · 25-02-2011, 10:50

hem scusami non sono molto esperta, cos'è?

**fcaldera** · 25-02-2011, 11:03

Originariamente inviato da graffithouse
ed usare ajax?

difficile, dovendo fare chiamate crossdomain a youtube.

**fcaldera** · 25-02-2011, 11:25

prova il codice, ho usato jquery e jqueryswfobject.
Demo funzionante: http://jsfiddle.net/fcalderan/vLAzC/

E' un esempio minimale (ma funziona anche a js disabilitato rimandando al video), a te il compito di studiarlo, capirlo e modificarlo come meglio credi nello stile e nel comportamento

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script>
    <script type="text/javascript" src="http://jquery.thewikies.com/swfobject/jquery.swfobject.1-1-1.min.js"> </script>


        <script type="text/javascript">
        $(document).ready(function() {
            
            $('.youtube_embedded_video a').each(function() {
                var placeholder = $('#video_container');
                $(this).bind('click', function() {
                    var videoID = this.href.replace(/^.+?\=/, '');
                    placeholder.empty();
                    placeholder.flash({
                        swf         : ['http://www.youtube.com/v/', videoID, '&autoplay=1'].join(''),
                        width       : "100%",
                        height      : "100%",
                        params          : {
                            wmode               : 'transparent',
                            allowFullScreen     : 'true',
                            allowscriptaccess   : 'always'
                        }
                    });
                    return false;

                });

            });
        });
        </script>

        <style type="text/css">
        #video_container {
           height       : 344px;
           width        : 425px;
           border       : 1px red solid;
           margin-right  : 30px;
        }
        </style>


    </head>

<body>

    <ul class="youtube_embedded_video">[*]Google app engine[*]D.Crockford, using JSlint for evil[/list]
    
    <div id="video_container"></div>

</body>
</html>

**Jill Valentine** · 25-02-2011, 11:44

wow grazie! E' perfetto! Ti posso fare solo una domanda? Se volessi mettere le scritte a destra del video? Perchè per metterle sopra o sotto ci sono riuscita ma a destra o sinistra no...

**fcaldera** · 25-02-2011, 11:51

Originariamente inviato da Jill Valentine
wow grazie! E' perfetto! Ti posso fare solo una domanda? Se volessi mettere le scritte a destra del video? Perchè per metterle sopra o sotto ci sono riuscita ma a destra o sinistra no...

usi i float o position relative+absolute
http://www.barelyfitz.com/screencast...s/positioning/

P.s. magari è supefluo sottolinearlo, ma le librerie sono state incluse dai rispettivi siti per semplicità. Scaricati le librerie e falle puntare dal tuo dominio (almeno jqueryswfobject)

**Jill Valentine** · 25-02-2011, 12:02

mmm scusa ma non sono molto esperta di queste cose, che dovrei fare con le librerie?

domandina, con position absolute poi non mi cambia la posizione a seconda dello schermo di chi apre il sito? perchè con un mio vecchio sito mi fece proprio questo giochetto

Discussione: Galleria video

Strumenti discussione

Ricerca discussione

Visualizza

Galleria video

Re: Galleria video

Permessi di invio