| Installation du plugin "Youtube" dans l'éditeur TinyMCE |
Titre du sujet : Installation du plugin "Youtube" dans l'éditeur TinyMCE
par grosdunord sur 24/05/2013 13:14:09
Bonjour à tous,
Alain01 nous à proposé une astuce pour intégrer un bouton Youtube dans l'éditeur tinyMCE https://www.frxoops.org/modules/news/a ... _rootid=8370&#comment8371
Cette extension et très utile, mais le problème et qu'il utilise la balise "object" qui et l'ancien code d'intégration de youtube.
Maintenant Youtube utilise les "iframe" j'ai donc modifié le js pour que le bouton nous intègre un format en iframe, mais j'ai était plus loin en rendant toutes les vidéos intégrer soit responsive.
Pour ce faire suivez la procédure de alain01 si dessus et nous allons modifier le fichier dialog.js qui ce trouve dans
/votre_site/class/xoopseditor/tinymce/tiny_mce/plugins/youtube/js/
remplacer de la ligne 80 à 103 ceci :
//Replace http://youtu.be/xxxxxxxx for&nbs ... .youtube.com/v/xxxxxxxxxx
if(f.youtubeID.value.match(new RegExp("http://www.youtube.com/","g"))){
//Replace url
var youtubeuri = f.youtubeID.value.replace(f.youtubeID.value,"http://www.youtube.com/v/"+YouTubeDialog.videovalue(f.youtubeID.value));
//Construct URL
var constructUri = youtubeuri+options;
}else if(f.youtubeID.value.match(new RegExp("http://youtu.be/","g"))){
//Replace url
var youtubeuri = f.youtubeID.value.replace('http://youtu.be/',"http://www.youtube.com/v/");
//Construct URL
var constructUri = youtubeuri+options;
}
//width="'+document.forms[0].youtubeWidth.value+'" height="'+document.forms[0].youtubeHeight.value+'"
// Insert the contents from the input into the document
var objectCode = '<div class="youtube" style="'+domSize+'">';
objectCode +='<object type="application/x-shockwave-flash" '+videoSize+' data="'+constructUri+'">';
objectCode += '<param name="movie" value="'+constructUri+'" />';
objectCode += '<param name="wmode" value="transparent" />';
objectCode += '</object>';
objectCode += '</div>';
tinyMCEPopup.editor.execCommand('mceInsertContent', false, objectCode);
tinyMCEPopup.close();
}
};
Par ceci :
//Replace http://youtu.be/xxxxxxxx for&nbs ... .youtube.com/v/xxxxxxxxxx
if(f.youtubeID.value.match(new RegExp("http://www.youtube.com/","g"))){
//Replace url
var youtubeuri = f.youtubeID.value.replace(f.youtubeID.value,"http://www.youtube.com/embed/"+YouTubeDialog.videovalue(f.youtubeID.value));
//Construct URL
var constructUri = youtubeuri+options;
}else if(f.youtubeID.value.match(new RegExp("http://youtu.be/","g"))){
//Replace url
var youtubeuri = f.youtubeID.value.replace('http://youtu.be/',"http://www.youtube.com/embed/");
//Construct URL
var constructUri = youtubeuri+options;
}
//width="'+document.forms[0].youtubeWidth.value+'" height="'+document.forms[0].youtubeHeight.value+'"
// Insert the contents from the input into the document
var objectCode = '<div class="videocontainer">';
objectCode +='<iframe '+videoSize+'';
objectCode += 'src="'+constructUri+'"';
objectCode += 'allowfullsreen />';
objectCode += '</iframe>';
objectCode += '</div>';
tinyMCEPopup.editor.execCommand('mceInsertContent', false, objectCode);
tinyMCEPopup.close();
}
};
Ensuite pour que ces vidéos soient responsive c’est-à-dire qu'elle s'adapte à tout type d'écran du pc au mobile nous allons rajouter quelque ligne dans votre fichier style.css de votre thème:
.videocontainer {
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
}
.videocontainer iframe
{
width:100%!important;
height: 100%!important;
position: absolute;
top: 0;left: 0;
}
.videocontainer embed
{
width:100%!important;
height: 100%!important;
position: absolute;
top: 0;left: 0;
}
.videocontainer object
{
width:100%!important;
height: 100%!important;
position: absolute;
top: 0;left: 0;
}
Vous voilà avec des balises iframes et des vidéos responsives
|
|
