Web dynamique Médias sociaux

Youtube, Dailymotion, Slideshare et les autres

L'insertion de documents multimédias externes est possible en faisant appel à ces documents grâce à la balise <iframe> comme dans le cas des vidéos Youtube.

Exercice 1 : Insérer une présentation Slideshare

Comment faire

Cliquer sur le bouton Partager et copier le code de la zone Intégrer.

Le code copié contient une partie proposant d'accéder aux autres présentation de l'auteur et à la page de la présentation occurrente. Ces contenus superflus peuvent être retirés de manière à ne conserver que la balise <iframe>.

Exemple du code...

<iframe src="http://fr.slideshare.net/slideshow/embed_code/key/Ng2DWMbqPlmhAJ" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//fr.slideshare.net/Grafree/webdesign-sites-web-et-mobilestendances-2015" title="Webdesign sites web et mobiles-tendances 2015" target="_blank">Webdesign sites web et mobiles-tendances 2015</a> </strong> from <strong> <a href="//www.slideshare.net/Grafree" target="_blank"> Olivier Dommange </a> </strong> </div>

Exercice 2 : Insérer un son

Comment faire

Cliquer sur le bouton Partager.

Copier le code de la zone Embed.

Coller le code contenant la balise <iframe>

Exemple du code...

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/22298597&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>

Exercice 3 : Insérer une vidéo Youtube

Comment faire

Cliquer sur le bouton Partager et copier le code de la zone Intégrer.

Coller le code contenant la balise <iframe>

Exemple du code...

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