2016-04-22 7 views
0

YouTube URLをページに自動埋め込むシステムを作りたいと思っています。たとえば、ユーザーがyoutubeからのビデオのリンクを置くとき。私はビデオのiframeを作りたいと思う。任意のコード行が評価されます。そのjsyは、URLだけを使って投稿にビデオを追加するのと同じです。youtube URLを使って自動埋め込みシステムを作る方法

+0

[ユーザーのクリックでjQueryを通じてYouTube動画を読み込む最も効率的な方法は何ですか?](http://stackoverflow.com/questions/6240946/what-is-the-最も効率的な方法 - 負荷 - youtube-videos-jquery-on-a-user-c)それはあなたを助けるかもしれません。 – hmd

+0

すでに見ました。 Didntは助けた。私は何を意味するかとは多少異なっています。私はちょうどURLを入力する必要があり、それは、iframeにURLを変換し、ポストにビデオを追加します。 – James

+0

うん、それは 'アンカータグ'で働いている。あなた自身の入力(URLを入力する)とボタン(クリックでトリガーするために使用される)を使用して、関数の入力値を取得することができます。 – hmd

答えて

0

非常に簡単ににしたい場合はをPHPで実行します。

使用preg_match()提出URLからのビデオハッシュ:あなたは、あなたのWebページにJQueryライブラリを含める必要が

//$url = $_POST['url']; 
$url = 'https://www.youtube.com/watch?v=dl4bprs4dB4'; 
preg_match('/v=([a-z0-9]+)/', $url, $matches); 

if (!empty($matches[1])) { 
    echo "<iframe width=\"854\" height=\"480\" src=\"https://www.youtube.com/embed/" . $matches[1] . "\" frameborder=\"0\" allowfullscreen></iframe>"; 
    // Outputs: <iframe width="854" height="480" src="https://www.youtube.com/embed/dl4bprs4dB4" frameborder="0" allowfullscreen></iframe> 
} 
1

、その後:

HTML:

<input type="text" id="video_url"> 
<input type="button" id="loadTheVideo" value="load the video"> 
<div class="details_right" id="video_container">video place</div> 

JQuery:

$(document).ready(function(){ 
    $('#loadTheVideo').click(function(e){ 
     e.preventDefault(); 
     var URL = $("#video_url").val(); 
     var htm = '<iframe width="425" height="349" src="http://www.youtube.com/embed/' + URL + '?rel=0" frameborder="0" allowfullscreen ></iframe>'; 
      $('#video_container').html(htm); 
     return false; 

    }); 
}); 

デモ:http://jsfiddle.net/sofc3e47/1/

は@OPの必要条件に従って答えWhat is the most efficient way to load YouTube videos through jQuery on a user click?を強化します。

+0

リンクが付いているビデオを埋め込むことができないように見えます。たとえば、www.youtube.com/embed/+urlのようになります。 url = youtube.com/watch?v=hdhshshの場合はどうなりますか?リンクはyoutube.com/embed/youtube.com/watch?v=hshshshsshになります。それは無効であることを意味し、/ embed/ – James

+0

@Jamesのユーザーエクスペリエンスの後のリンクではないコードでなければならず、 'https://www.youtube.com/watch?v = ZHfEakxwosQ'のようなURLを処理しますユーザーによって入力ボックスに入力されます。しかし、開発レベルでは、YouTubeのルールに従って、サードパーティのウェブサイトで動画を再生することができます(https://support.google.com/youtube/answer/171780?hl=ja)。したがって、ユーザーインターフェイスのURLは、あなたが望むのと同じままになります。 – hmd

関連する問題