2017-11-25 9 views
1

私はSQLテーブルからビデオデータをリストしています。 thaのテーブルでブートストラップモーダルボックスでyoutubeビデオを開く

フィールド: - sidebar_video_id(自動インクリメント) - sidebar_video_nev - sidebar_video_link(完全なURL) - 私がクリックしたときに私が欲しいものsidebar_video_v_id(URLの末尾からの動画ID)

が、あります各ビデオでは、ブートストラップモーダルボックスで開いて再生します。今度はボックスが開きますが、空でもコンソールのエラーも表示されません。

<?php 
$get_videos = mysqli_query($kapcs, "SELECT * FROM sidebar_video"); 
if(mysqli_num_rows($get_videos) > 0) 
{ 
    while($vid = mysqli_fetch_assoc($get_videos)) 
    { 
     echo '<div class="sidebar_youtube_box">'; 
     echo '<a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'"><img src="http://img.youtube.com/vi/'.$vid['sidebar_video_v_id'].'/hqdefault.jpg" class="img-responsive"></a>'; 
     echo '</div>'; 
    } 
} 
?> 


<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Bezárás</span></button> 
     <h4 class="modal-title" id="myModalLabel">Videó megtekintése</h4> 
     </div> 
     <div class="modal-body" id="video_modal_body"> 

     </div> 
    </div> 
    </div> 
</div> 

$('.open_youtube_modal').click(function(e) { 
     e.preventDefault(); 
     var v_id = $(this).attr('id'); 
     var full_url = $(this).attr('data-url'); 

     var embed_html = '<iframe width="560" height="315" src="' + full_url + '" frameborder="0" allowfullscreen></iframe>'; 

     //alert(embed_html); 

     $('#video_modal_body').html(embed_html); 
     $('#videoModal').modal('show'); 

    }); 
+0

'full_url'は正しい値を返しますか? /コンソールまたはPHPエラーログのエラー? – Pedram

答えて

0

あなたはhttps://www.youtube.com/watch?v=[videoId]とは対照的に、https://www.youtube.com/embed/[videoId]形式を使用する必要があります。 Youtubeは、後者のものとクロスオリジンフレーミングを許可していません。

+0

こんにちは!それは動作します!しかし、モーダルを閉じると、どうやってビデオを止めることができますか? – KissTom87

+0

@ KissTom87もう一つの質問ですが、最も簡単な方法は、 'hidden.bs.modal'イベントの'#video_modal_body'の内容を次のように破壊することです: $( '#videoModal')。on( 'hidden .bs.modal '、function(e){$('#video_modal_body ').html(' ');}) – dferenc

+0

ありがとう、その作業! :) – KissTom87

関連する問題