Воспроизведение Youtube видео, просто передав URL видео

Question

Я искал в сети, но ничего, что работает, как я собираюсь. Что я хочу, так это то, что у меня есть текстовое поле, в котором пользователь может передать URL-адрес видео YouTube (в конце), а затем в интерфейсе я хочу, чтобы это видео отображалось с использованием этого URL. Дело в том, что он не будет показывать видео. Когда я использую iFrame, он работает, но ему нужен URL с таким вот

<iframe width="100%" height="100%" src="http://www.youtube.com/embed/vM89zeKimOY" frameborder="0" allowfullscreen></iframe>

Он работает нормально, но, как вы видите, URL-адрес не является общим URL-адресом, который вы копируете / вставляете из панели URL-адресов.

URL видео это:

https://www.youtube.com/watch?v=vM89zeKimOY

так что я хочу что-то вроде этого:

<iframe width="100%" height="100%" src="https://www.youtube.com/watch?v=vM89zeKimOY" frameborder="0" allowfullscreen></iframe>

Я не знаю, есть ли плагин, куда вы можете просто вставить URL-адрес, и он воспроизводится, или то, что я пропускаю, но подсказка или какая-либо помощь будет очень приветствоваться.

Answer 1

Используя jquery, вы можете просто достичь этого.

Html

<input id="TextBoxURL" />
    <br />
    <div id="iframe">        
    </div>

скрипт

<script type="text/javascript">
        $(document).ready(function () {

            $('#TextBoxURL').change(function () {
                var youTubeUri = $('#TextBoxURL').val();
                var youTubeVideoId = get_youtubeId(youTubeUri);
                loadYouTubeVideo(youTubeVideoId);
            }); 
        });

        function get_youtubeId(url) {
            var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
            var match = url.match(regExp);
            if (match && match[2].length == 11) {
                return match[2];
            } else {
                //error
            }
        }

        function loadYouTubeVideo(id){
            $('#iframe').append("<iframe width='560' height='315' src='//www.youtube.com/embed/"+id+"' frameborder='0' allowfullscreen></iframe>");
        }
    </script>

Я не включил часть проверки здесь.

Приветствия. Удачного кодирования..!!!

Answer 2

var NormalLink = "https://www.youtube.com/watch?v=vM89zeKimOY";
var theCode = NormalLink.substring(NormalLink.indexOf('?v=')+3);
var embedded = 'https://www.youtube.com/embed/'+theCode;       

FiddleLink: http://jsfiddle.net/swm7v/2/