1

I found this code that converts youtube/vimeo url's into embedded videos.

Javascript - convert youtube/vimeo url's into embed versions for use on a forum comment feature

I am trying to use it in my CMS which uses TinyMCE. TinyMCE wraps paragraph tags around the urls. While this doesn't affect the YouTube url it breaks the Vimeo url.

The fiddle for this is here: http://jsfiddle.net/88Ms2/378/

    var videoEmbed = {
    invoke: function(){

        $('body').html(function(i, html) {
            return videoEmbed.convertMedia(html);
        });

    },
    convertMedia: function(html){
        var pattern1 = /(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/?(.+)/g;
        var pattern2 = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;
        var pattern3 = /([-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?(?:jpg|jpeg|gif|png))/gi;

        if(pattern1.test(html)){
           var replacement = '<iframe width="420" height="345" src="//player.vimeo.com/video/$1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';

           var html = html.replace(pattern1, replacement);
        }


        if(pattern2.test(html)){
              var replacement = '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
              var html = html.replace(pattern2, replacement);
        } 


        if(pattern3.test(html)){
            var replacement = '<a href="$1" target="_blank"><img class="sml" src="$1" /></a><br />';
            var html = html.replace(pattern3, replacement);
        } 






        return html;
    }
}






setTimeout(function(){
    videoEmbed.invoke();
},3000);

In the fiddle example, if you add paragraph tags around the vimeo url in the html and run the code, it no longer displays the vimeo video. I noticed that a tag or any text before the link is fine, but anything after the link, any text or tag, (on the same line) breaks it.

Any suggestions for how to fix this?

Thank you!

Community
  • 1
  • 1
Terry Barth
  • 11
  • 2

1 Answers1

0
<?php
 function videoType($url) {
if (strpos($url, 'youtube') > 0)
{   // https://www.youtube.com/watch?v=YKKMtGhVdhc
    $youtube_url = 'https://www.youtube.com/embed/';
    // Now get the 'v=' value & stick on the end
    preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $url, $matches);
    $v = $matches[1];
    // Final result
    return '<div class="videoWrapper"><iframe src="'. $youtube_url . $v . '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>';
}
elseif (strpos($url, 'vimeo') > 0)
{   // https://player.vimeo.com/video/116582567
    $vimeo_url = 'https://player.vimeo.com/video/';
    // Now get the last part of the url
    $v = substr( strrchr(  $url, '/' ), 1 );
    // Final result
    return '<div class="videoWrapper"><iframe src="'. $vimeo_url . $v . '" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>';
}
else if (strpos($url, 'matterport') > 0)
{   // https://my.matterport.com/show/?m=uRGXgoiYk9f
    $matterport_url = 'https://my.matterport.com/show/';
    // Now get the last port of the url
    $v2 = (explode("/", $url));
    $v = end($v2);
    // Fina result
    return '<div class="videoWrapper"><iframe src="' . $matterport_url . $v . '" frameborder="0" allowfullscreen allow="vr"></iframe></div>';
}
else
{
    return false;
}}  ?>

I created a solution above which creates 3 different types of embedded videos in PHP

BennKingy
  • 1,265
  • 1
  • 18
  • 43