Этот код работает, превращая любые теги p, имеющие ссылку YouTube в видео YouTube, этот код отлично работает с PHP, но мне нужно найти способ интегрировать цикл PHP, чтобы я мог интегрировать ссылки из базы данных mysqli в теги p поэтому я могу показать несколько видео.
Это код без PHP, который работает в одиночку. Примечание. Это не работает с редактором stackoverflow, но он работает с этим редактором https://codepen.io/pen
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ function getId(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 { return 'error'; } } var god= document.getElementById("myId").innerHTML var aid = getId(god); $('#aid').html(aid); $('#myCode').html('<iframe width="560" height="315" src="//www.youtube.com/embed/' + aid + '" frameborder="0" allowfullscreen></iframe>'); }); </script> <style> #myId { color: orange; } </style> </head> <body> YouTube ID: <p style='visibility: hidden;' id="myId">https://www.youtube.com/watch?v=8qWePX39R40</p> <br /> <br /> Embed code: <pre id="myCode"></pre> </body> </html> Это код, который я пытаюсь интегрировать в код, содержащий PHP и MYSQLI.
<?php include("session.php"); $query ="SELECT*FROM videos WHERE author_id='$user_id'"; $result = mysqli_query($connect,$query); ?> <!DOCTYPE html> <html> <html> <head> <meta name="viewport" content="width=device-width"> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="general.css"> <style> .video-template{ border: 1px solid none; } #my-videos-title { font-family: raleway; position: relative; top: 50px; text-align: center; } .video-editior-options{ margin: auto; background: none; width: 188px; height: 35px; position: relative; top: 40px; } .video-editior-options a{ color: gold; display: inline; text-align: center; text-decoration: none; background-color: none; padding: 5px 5px;; margin-left: 4px; border-radius: 8px; font-family: raleway; position: relative; top: 8px; left: 1px; } .video-container { border: 2px solid none; margin: auto; width: 90%; position: relative; top: 45px; background-color: none; border-radius: 8px; margin-bottom: 75px; } #youtube_video { width: 200px; height: 200px; margin-right: 5px; margin-left: 50px; margin-bottom: 30px; border-radius: 8px; } #video-id { display: none; } @media only screen and (min-width : 320px) and (max-width : 736px){ #youtube_video { width: 90%; height: 138px; margin: auto; margin-bottom: 30px; border-radius: 8px; clear: both; display: block; } } @media only screen and (min-device-width : 320px) and (max-device-width : 736px) and (orientation : landscape) { #youtube_video { height: 230px; } } </style> </head> <body> <div class='video-template'> <h1 id='my-videos-title'>My videos</h1> <div class='video-editior-options'> <a href='#'>Add</a> <a href='#'>Update</a> <a href='#'>Delete</a> </div> <div class='video-container'> <br> <?php /*fetch associative array*/ while($row = mysqli_fetch_assoc($result)) { ?> <script> $(document).ready(function(){ function getId(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 { return 'error'; } } var god= document.getElementById("myId").innerHTML var aid = getId(god); $('#aid').html(aid); $('#myCode').html('<iframe width="560" height="315" src="//www.youtube.com/embed/' + aid + '" frameborder="0" allowfullscreen></iframe>'); }); </script> <p style='visibility: hidden;' id="myId"><?php echo $row['video']; ?></p> <pre id="myCode"></pre> <?php } /*free result set*/ mysqli_free_result($result); /*close connection*/ mysqli_close($connect); ?> <pre id="myCode"></pre> <br> </div> <!--video-container END^--> <br> </div> <!--video-template END^--> </body> </html>в<?php include("session.php"); $query ="SELECT*FROM videos WHERE author_id='$user_id'"; $result = mysqli_query($connect,$query); ?> <!DOCTYPE html> <html> <html> <head> <meta name="viewport" content="width=device-width"> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="general.css"> <style> .video-template{ border: 1px solid none; } #my-videos-title { font-family: raleway; position: relative; top: 50px; text-align: center; } .video-editior-options{ margin: auto; background: none; width: 188px; height: 35px; position: relative; top: 40px; } .video-editior-options a{ color: gold; display: inline; text-align: center; text-decoration: none; background-color: none; padding: 5px 5px;; margin-left: 4px; border-radius: 8px; font-family: raleway; position: relative; top: 8px; left: 1px; } .video-container { border: 2px solid none; margin: auto; width: 90%; position: relative; top: 45px; background-color: none; border-radius: 8px; margin-bottom: 75px; } #youtube_video { width: 200px; height: 200px; margin-right: 5px; margin-left: 50px; margin-bottom: 30px; border-radius: 8px; } #video-id { display: none; } @media only screen and (min-width : 320px) and (max-width : 736px){ #youtube_video { width: 90%; height: 138px; margin: auto; margin-bottom: 30px; border-radius: 8px; clear: both; display: block; } } @media only screen and (min-device-width : 320px) and (max-device-width : 736px) and (orientation : landscape) { #youtube_video { height: 230px; } } </style> </head> <body> <div class='video-template'> <h1 id='my-videos-title'>My videos</h1> <div class='video-editior-options'> <a href='#'>Add</a> <a href='#'>Update</a> <a href='#'>Delete</a> </div> <div class='video-container'> <br> <?php /*fetch associative array*/ while($row = mysqli_fetch_assoc($result)) { ?> <script> $(document).ready(function(){ function getId(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 { return 'error'; } } var god= document.getElementById("myId").innerHTML var aid = getId(god); $('#aid').html(aid); $('#myCode').html('<iframe width="560" height="315" src="//www.youtube.com/embed/' + aid + '" frameborder="0" allowfullscreen></iframe>'); }); </script> <p style='visibility: hidden;' id="myId"><?php echo $row['video']; ?></p> <pre id="myCode"></pre> <?php } /*free result set*/ mysqli_free_result($result); /*close connection*/ mysqli_close($connect); ?> <pre id="myCode"></pre> <br> </div> <!--video-container END^--> <br> </div> <!--video-template END^--> </body> </html>
Проблема в том, что видео просто перестает работать, но кто-то сказал мне раньше, что мне нужно использовать цикл jQuery, чтобы заставить это работать. Я пробовал это, но он не работает с PHP и MYSQLI, он работает только с ними, поэтому я удалил цикл jQuery while, и с тех пор я пытался заставить это работать с петлей PHP и MYSQLI.
Я думаю, вы хотели использовать следующее решение. В вашем коде вы добавляете лишнее пространство, поэтому идентификатор видео YouTube не распознается. надеюсь, что это сработает
<?php //include("session.php"); $user_id='001'; $query ="SELECT*FROM videos WHERE author_id='$user_id'"; $con=mysqli_connect("localhost","root","","my_db"); $result = mysqli_query($con,$query); ?> <!DOCTYPE html> <html> <html> <head> <meta name="viewport" content="width=device-width"> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="general.css"> <style> .video-template { border: 1px solid none; } #my-videos-title { font-family: raleway; position: relative; top: 50px; text-align: center; } .video-editior-options { margin: auto; background: none; width: 188px; height: 35px; position: relative; top: 40px; } .video-editior-options a { color: gold; display: inline; text-align: center; text-decoration: none; background-color: none; padding: 5px 5px; ; margin-left: 4px; border-radius: 8px; font-family: raleway; position: relative; top: 8px; left: 1px; } .video-container { border: 2px solid none; margin: auto; width: 90%; position: relative; top: 45px; background-color: none; border-radius: 8px; margin-bottom: 75px; } #youtube_video { width: 200px; height: 200px; margin-right: 5px; margin-left: 50px; margin-bottom: 30px; border-radius: 8px; } #video-id { display: none; } @media only screen and (min-width: 320px) and (max-width: 736px) { #youtube_video { width: 90%; height: 138px; margin: auto; margin-bottom: 30px; border-radius: 8px; clear: both; display: block; } } @media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) { #youtube_video { height: 230px; } } </style> </head> <body> <div class='video-template'> <h1 id='my-videos-title'>My videos</h1> <div class='video-editior-options'> <a href='#'>Add</a> <a href='#'>Update</a> <a href='#'>Delete</a> </div> <div class='video-container'> <br> <?php /*fetch associative array*/ $i=1; while($row = mysqli_fetch_assoc($result)) { ?> <script> $(document).ready(function() { function getId(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 { return 'error'; } } var god = document.getElementById("myId<?php echo $i;?>").innerHTML var aid = getId(god); $('#aid').html(aid); $('#myCode<?php echo $i;?>').html('<iframe width="560" height="315" src="//www.youtube.com/embed/' + aid + '" frameborder="0" allowfullscreen></iframe>'); }); </script> <p style='visibility: hidden;' id="myId<?php echo $i;?>"><?php echo $row['link']; ?></p> <pre id="myCode<?php echo $i;?>"></pre> <?php $i=$i+1; } /*free result set*/ mysqli_free_result($result); /*close connection*/ mysqli_close($con); ?> <pre id="myCode"></pre> <br> </div> <!--video-container END^--> <br> </div> <!--video-template END^--> </body> </html>
Попробуй это
<?php include("session.php"); $query = "SELECT*FROM videos WHERE author_id='$user_id'"; $result = mysqli_query($connect, $query); $resultRow = []; while ($row = mysqli_fetch_assoc($result)) { $resultRow[] = $row['video']; } /*free result set*/ mysqli_free_result($result); /*close connection*/ mysqli_close($connect); ?> <!DOCTYPE html> <html> <html> <head> <meta name="viewport" content="width=device-width"> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="general.css"> <style> .video-template { border: 1px solid none; } #my-videos-title { font-family: raleway; position: relative; top: 50px; text-align: center; } .video-editior-options { margin: auto; background: none; width: 188px; height: 35px; position: relative; top: 40px; } .video-editior-options a { color: gold; display: inline; text-align: center; text-decoration: none; background-color: none; padding: 5px 5px;; margin-left: 4px; border-radius: 8px; font-family: raleway; position: relative; top: 8px; left: 1px; } .video-container { border: 2px solid none; margin: auto; width: 90%; position: relative; top: 45px; background-color: none; border-radius: 8px; margin-bottom: 75px; } #youtube_video { width: 200px; height: 200px; margin-right: 5px; margin-left: 50px; margin-bottom: 30px; border-radius: 8px; } #video-id { display: none; } @media only screen and (min-width: 320px) and (max-width: 736px) { #youtube_video { width: 90%; height: 138px; margin: auto; margin-bottom: 30px; border-radius: 8px; clear: both; display: block; } } @media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) { #youtube_video { height: 230px; } } </style> <script> function getId(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 { return 'error'; } } </script> </head> <body> <div class='video-template'> <h1 id='my-videos-title'>My videos</h1> <div class='video-editior-options'> <a href='#'>Add</a> <a href='#'>Update</a> <a href='#'>Delete</a> </div> <div class='video-container'> <br> <?php foreach ($resultRow as $key => $video) : ?> <script> $(function () { var god = $('.myId:eq(' + <?= $key ?>+')').html(); var aid = getId(god); $('.myCode:eq(' + <?= $key ?> +')').html('<iframe width="560" height="315" src="//www.youtube.com/embed/' + aid + '" frameborder="0" allowfullscreen></iframe>'); }) </script> <p style='visibility: hidden;' class="myId"><?= $video ?></p> <pre class="myCode"></pre> <?php endforeach; ?> <br> </div> \<!--video-container END^--> <br> </div> <!--video-template END^--> </body> </html>в<?php include("session.php"); $query = "SELECT*FROM videos WHERE author_id='$user_id'"; $result = mysqli_query($connect, $query); $resultRow = []; while ($row = mysqli_fetch_assoc($result)) { $resultRow[] = $row['video']; } /*free result set*/ mysqli_free_result($result); /*close connection*/ mysqli_close($connect); ?> <!DOCTYPE html> <html> <html> <head> <meta name="viewport" content="width=device-width"> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="general.css"> <style> .video-template { border: 1px solid none; } #my-videos-title { font-family: raleway; position: relative; top: 50px; text-align: center; } .video-editior-options { margin: auto; background: none; width: 188px; height: 35px; position: relative; top: 40px; } .video-editior-options a { color: gold; display: inline; text-align: center; text-decoration: none; background-color: none; padding: 5px 5px;; margin-left: 4px; border-radius: 8px; font-family: raleway; position: relative; top: 8px; left: 1px; } .video-container { border: 2px solid none; margin: auto; width: 90%; position: relative; top: 45px; background-color: none; border-radius: 8px; margin-bottom: 75px; } #youtube_video { width: 200px; height: 200px; margin-right: 5px; margin-left: 50px; margin-bottom: 30px; border-radius: 8px; } #video-id { display: none; } @media only screen and (min-width: 320px) and (max-width: 736px) { #youtube_video { width: 90%; height: 138px; margin: auto; margin-bottom: 30px; border-radius: 8px; clear: both; display: block; } } @media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) { #youtube_video { height: 230px; } } </style> <script> function getId(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 { return 'error'; } } </script> </head> <body> <div class='video-template'> <h1 id='my-videos-title'>My videos</h1> <div class='video-editior-options'> <a href='#'>Add</a> <a href='#'>Update</a> <a href='#'>Delete</a> </div> <div class='video-container'> <br> <?php foreach ($resultRow as $key => $video) : ?> <script> $(function () { var god = $('.myId:eq(' + <?= $key ?>+')').html(); var aid = getId(god); $('.myCode:eq(' + <?= $key ?> +')').html('<iframe width="560" height="315" src="//www.youtube.com/embed/' + aid + '" frameborder="0" allowfullscreen></iframe>'); }) </script> <p style='visibility: hidden;' class="myId"><?= $video ?></p> <pre class="myCode"></pre> <?php endforeach; ?> <br> </div> \<!--video-container END^--> <br> </div> <!--video-template END^--> </body> </html>