AccueilConnexion
Derniers sujets
[PHPBB2]Encadrer les vidéos youtube et daylimotion
Page 1 sur 1 • Partagez
- fascicularia
Milouzien
fascicularia le Mar 22 Jan 2019 - 19:34
Bonjour à tous,
un petit bidouillage qui vous permettra d'encadrer les vidéos de Youtube et Daylimotion.
Un visuel pour commencer :
![[PHPBB2]Encadrer les vidéos youtube et daylimotion Sans_t33](https://i.servimg.com/u/f74/11/93/85/24/sans_t33.png)
Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript
Mets un titre explicite.
Coches sur les sujets.
Déposes ceci:
Penses a cliquer sur le bouton Valider
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposes ceci:
Un petit explicatif :
iframe[src*="youtube.com"], iframe[src*="dailymotion.com"] va gérer l'encadrement immédiat de la vidéo.
div#video:before va permettre d'insérer une partie au dessus de la vidéo (le div est généré par le js)
Voilà,c'est tout pour le moment.
Un soucis?
Direction l'entraide
https://www.milouze14.com/f108-entraide-tous-supports
un petit bidouillage qui vous permettra d'encadrer les vidéos de Youtube et Daylimotion.
Un visuel pour commencer :
Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript
Mets un titre explicite.
Coches sur les sujets.
Déposes ceci:
- Code:
/*Encadrement youtube et dalymotion*/
$(function(){
$('.postbody').find('iframe[src*="youtube.com"], iframe[src*="dailymotion.com"] ').wrap('<div id="video"></div>');
});
Penses a cliquer sur le bouton Valider
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposes ceci:
- Code:
iframe[src*="youtube.com"], iframe[src*="dailymotion.com"] {
width:560px;
background-color: #fff;
padding: 7px!important;
box-shadow: 2px 2px 15px 0 #000;
display: block;
margin: auto;
}
div#video:before {
content: "";
background-color: #fafafa;
height: 30px;
border: 8px solid #fff;
display: block;
Width: 550px;
box-shadow: 2px 2px 15px 0 #000;
margin: auto;
padding-left: 4px;
padding-right: 4px;
}
Un petit explicatif :
iframe[src*="youtube.com"], iframe[src*="dailymotion.com"] va gérer l'encadrement immédiat de la vidéo.
div#video:before va permettre d'insérer une partie au dessus de la vidéo (le div est généré par le js)
-Astuce des Forums Milouze14&Compagnie-
Pour toute information,merci de contacter un Membre du Staff | ![[PHPBB2]Encadrer les vidéos youtube et daylimotion Staff10](https://i.servimg.com/u/f37/11/26/21/37/staff10.png) |
Voilà,c'est tout pour le moment.
Un soucis?
Direction l'entraide
https://www.milouze14.com/f108-entraide-tous-supports
Dernière édition par fascicularia le Dim 27 Jan 2019 - 14:02, édité 1 fois
- Milouze14
Fondateur
Milouze14 le Mar 22 Jan 2019 - 19:36
- fasciculariaMilouzien
fascicularia le Mar 22 Jan 2019 - 19:38
De rien Philippe.
- oneandone
Milouzien
oneandone le Ven 8 Fév 2019 - 12:22
Merci beaucoup !
- oneandoneMilouzien
oneandone le Ven 8 Fév 2019 - 12:23
Salut,
est-ce que pour modernnbb cela marche les gars ?
est-ce que pour modernnbb cela marche les gars ?
- Chéryl
Milouzien
Chéryl le Ven 8 Fév 2019 - 12:30
Merci beaucoup !
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
» histoire du Jour sans fin
» Coca-Cola (histoire)
» Sœur Mathématiques et Sœur Logique
» Les deux bons potes "histoire"
» *RESOLU*[PhpBB2] Onglet sur page d’accueil
» Le spationaute belge
» *RESOLU*[PhpBB2] Aide mise en forme page d’accueil merci
» *RESOLU*[PhpBB2] Chatbox / Réinitialiser
» *RESOLU*[PhpBB2] Bloquer les IP
» Les réseaux sociaux
» [PhpBB2] Barre navigation supplémentaire
» *RESOLU*[Invision] Réduction image avec clic agrandissement
» Histoire de Blondes Sans Fin
» *RESOLU*[PhpBB3] Interdiction de citer le dernier message
» Règlement de l'entraide Forumactif
» *RESOLU*[PhpBB2] [Toutes versions] Activer la prévisualisation directe
» [PHPBB3] Afficher une réponse automatique style staff
» *RESOLU*[PhpBB2] Changer un message quand un membre ne peut pas répondre à un sujet
» [Toutes versions] Activer la prévisualisation directe