Support for TinyMCE 4 plugin Youtube search and insert

ceasar

ceasar does not currently provide support for this item.

Popular questions for this item

TIP

If you want to use the image placeholder and don’t want to convert it on the server side you can do this with a small jquery snippet

First change the output in youtube.js to
var sHTML = '<img class="mceYItem" src="' + secure + ' ://img.youtube.com/vi/' + getVideoId($('#inpURL').val()) + '/0.jpg" alt="' + sTitle + '" width="' + $('#widthURL').val() + '" height="' + $('#heightURL').val() + '" data-video="youtube" data-skin="' + $('#skinURL').val() + '" data-id="' + getVideoId($('#inpURL').val()) + '" />';

Now for the front end you can use the following jquery snippet

(function($){
jQuery(document).ready(function($){

$('.mceYItem').replaceWith(function (){
    return '<iframe id="'+$(this).attr('data-id')+'" style="'+$(this).attr('style')+'" class="'+$(this).attr('class')+'" title="'+$(this).attr('alt')+'" width="'+$(this).attr('width')+'" height="'+$(this).attr('height')+'" src="http://www.youtube.com/embed/'+$(this).attr('data-id')+'?wmode=opaque&theme='+$(this).attr('data-skin')+'&iv_load_policy=3&modestbranding=1&showinfo=0&rel=0&autohide=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>';
});

});
})(jQuery);

For the css you can use

/* youtube */
.mceYItem {
padding: 5px;
border: solid 1px #CCC;
}
iframe.alignright{
display: inline;
margin:0 0 0 10px;
}
iframe.alignleft {
display: inline;
margin:0 10px 0 0;
}
iframe.aligncenter {
clear: both;
display: block;
margin-left: auto!important;
margin-right: auto!important;
margin-bottom: 10px;
}

Adjust default widht and height

Open plugins/youtube/template/forms.html

Here you find for the width

<input type="text" class="span2" value="320" data-slider-min="200" data-slider-max="1280" data-slider-step="5" data-slider-value="320" id="widthURL" >

Change value=”320” and data-slider-value=”320”

To change the height you will find these values a few lines below the above code

php function to parse the image placeholder

function handleYTimg ($string) {
    preg_match_all('/<img />]+>/ism',$string,$images);
        foreach($images[0] as $image){
            if(preg_match_all('/\s*(src|style|alt|width|height|data-id|data-skin|data-video)\s*=\s*"([^"]*)"/ism',$image,$properties) && count($properties) == 3 && count($properties[2]) == 8){
                $string = str_replace($image,'<iframe title="' . htmlspecialchars($properties[2][array_search('alt',$properties[1])]) . '" width="' . htmlspecialchars($properties[2][array_search('width',$properties[1])]) . '" height="' . htmlspecialchars($properties[2][array_search('height',$properties[1])]) . '" src="//www.youtube.com/embed/' . htmlspecialchars($properties[2][array_search('data-id',$properties[1])]) . '?wmode=opaque&theme=' . htmlspecialchars($properties[2][array_search('data-skin',$properties[1])]) . '" frameborder="0" allowfullscreen></iframe>', $string);
            }
        }
    return $string;
}
by
by
by
by
by
by