Umbraco embedded video 'Data Type'

package.manifest

{
   "$schema": "/App_Plugins/manifestSchema.json",
   "propertyEditors":[
      {
         "alias":"VideoEmbedder",
         "name":"Video Embedder",
         "editor":{
            "view":"~/App_Plugins/VideoEmbedder/VideoEmbedder.html"
         }
      }
   ],
   "javascript":[
      "~/App_Plugins/VideoEmbedder/VideoEmbedder.js"
   ]
}

VideoEmbedder.html

<div ng-controller="VideoEmbedderController">
    
    <label>Video URL:</label>
    <input type="text" ng-model="model.rawUrl" ng-change="update()"/>
    <br/>
    <label>Video Code:</label>
    <span ng-bind="model.code"></span>
    
    <div class="preview" ng-bind-html-unsafe="model.value">
        
    </div> 
    
    <input type="hidden" ng-bind="model.value"/>

</div>

VideoEmbedder.js

angular.module("umbraco").controller("VideoEmbedderController", function ($scope, videoEmbedderService) {

    $scope.update = function () {
        var rawUrlValid = !($scope.model.rawUrl == null || $scope.model.rawUrl == '');
        var valuevalid = !($scope.model.value == null || $scope.model.value == '');
        if (!rawUrlValid & !valuevalid)
            return;
        
        var searchValue = rawUrlValid ? $scope.model.rawUrl : $scope.model.value;
        for (var videoType in videoEmbedderService) {
            if (!videoEmbedderService[videoType].test(searchValue))
                continue;

            $scope.model.code = videoEmbedderService[videoType].parse(searchValue);
            $scope.model.value = videoEmbedderService[videoType].render($scope.model.code);
        }

    }

    $scope.update();
});

angular.module("umbraco.services").factory("videoEmbedderService", function ($http) {
    return {
        youTube: {
            test: function(source) {
                return source.toLowerCase().indexOf('youtube') > -1;
            },
            parse: function(source) {
                return source.indexOf('iframe') > -1 ? this.parseHtml(source) : this.parseUrl(source);
            },
            parseUrl: function(url) {
                //https://www.youtube.com/watch?v=XQu8TTBmGhA
                return url.split('v=')[1];
            },
            parseHtml : function(html) {
                //'<iframe src="//www.youtube.com/embed/XQu8TTBmGhA" frameborder="0" allowfullscreen></iframe>'
                return html.split('embed/')[1].split('"')[0];
            },
            render: function (id) {
                return '<iframe class="video video-youtube" src="//www.youtube.com/embed/' + id + '" frameborder="0" allowfullscreen></iframe>';
            }
        },
        vimeo: {
            test: function (source) {
                return source.toLowerCase().indexOf('vimeo') > -1;
            },
            parse: function (source) {
                return source.indexOf('iframe') > -1 ? this.parseHtml(source) : this.parseUrl(source);
            },
            parseUrl: function (url) {
                //http://vimeo.com/87110435
                return url.split('.com/')[1];
            },
            parseHtml: function (html) {
                //'<iframe src="//player.vimeo.com/video/87110435" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'
                return html.split('video/')[1].split('"')[0];
            },
            render: function (id) {
                return '<iframe class="video vide-video" src="//player.vimeo.com/video/' + id + '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
            }
        }
    }
});