Sql-ből youtube videók megjelenítése bootstrap modal-ban

Sql-ből youtube videók megjelenítése bootstrap modal-ban
2017-11-25T10:52:32+01:00
2017-11-27T10:13:34+01:00
2022-12-04T22:30:40+01:00
MercedesS500
Sql-ből listázok ki videókat. A táblában az alábbiakat tárolom:

- sidebar_video_id (elsődleges, auto increment)
- sidebar_video_nev
- sidebar_video_link (a teljes url)
- sidebar_video_v_id (a videó id-je az url végén)

Azt szeretném, ha valamelyik videóra kattintok, akkor az ne ott az oldalsávban, vagy neis új odlalon, hanem egy bootstrap modal-ban nyíljon meg, és ott lehessen lejátszani.

Jelenleg itt tartok:

<?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="#" 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>
Mutasd a teljes hozzászólást!
Hogy néz ki a full url-ed?

Az eredeti youtube oldalt (youtube.com/watch?v=valami) nem fogod tudni beágyazni iframebe mert a youtube tiltja header által (X-Frame-Options). Használd az embed urlt az iframe src-be: hxxps://www.youtube.com/embed/valami
Mutasd a teljes hozzászólást!

  • Ha csak egy id="videoModal" blookkod lenne (az alaphelyzetben rejtve, mivel modal), viszont lenne egy listád az összes videó azonosítójával?
    Akkor a lista elemére klikkelve átadod az azonosítót egy ajax-hívásnak a visszakapott adatok alapján a megfelelő elemek tulajdonságát módosítod, majd megjeleníted a modal ablakot...
    Mutasd a teljes hozzászólást!
  • Közben tovább mentem, mutatom az újat. A hiba az annyi, hogy megnyílik a modal, de üres marad.

    <?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>'; } } ?>

    $('.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');

    });
    Mutasd a teljes hozzászólást!
  • Ha közben változott...
    Akkor először nézd meg, hogy mit látsz a kliensnek kiküldött forrásban a "class="sidebar_youtube_box" elemekben és utána eldöntheted, hogy a JS-kód mit kap meg ebből és az megfelel-e...
    Megj: Egy működő példa (persze csak egy videóval), melyet átalakíthatsz többre és modálra...
    Keresés és egy link (nézd meg a demo-t)...
    Mutasd a teljes hozzászólást!
  • Hali,

    használd a youtube iframe_api-ját. Példa :)
    Mutasd a teljes hozzászólást!
  • Hogy néz ki a full url-ed?

    Az eredeti youtube oldalt (youtube.com/watch?v=valami) nem fogod tudni beágyazni iframebe mert a youtube tiltja header által (X-Frame-Options). Használd az embed urlt az iframe src-be: hxxps://www.youtube.com/embed/valami
    Mutasd a teljes hozzászólást!
  • Szia! Nem tudom mennyire ragaszkodsz az eddig elkészült progidhoz, én már csináltam ilyet (saját megoldással), lényegesen egyszerűbb mint ez amit itt látok. Ha nem oldódik meg, megírom az oldal címét ahol meg tudod nézni (akár privátban is).
    Mutasd a teljes hozzászólást!
  • Köszi, ez lett a jó!

    A modal bezárásakor pedig ezzel lehet "megállítani" a videót:

    $('#videoModal').on('hidden.bs.modal', function (e) { $('#video_modal_body').html(''); })
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd