Insert embed video with mysql

Question

Good afternoon, I am developing a website to simplify the search for educational videos for my TCC.

I made a system with two combo box to search the disciplines in the database and the contents, being contents a key Foreign of disciplines.

<h2 class="title">Selecione a disciplina</h2>
        <form action="" method="get">
        <div class="box">
          <select name="disciplina" id="disciplina">
            <option value="" selected = selected>Selecione uma disciplina</option>
              <?php
              if($num_logar > 0) {
                  do {
                  echo "<option value='".$fet_logar['disciplina_id']."'>".$fet_logar['disciplina_nome']."</option>";
                  }while($fet_logar = mysqli_fetch_assoc($exe_logar));
              }
              ?>
        </select>
            </div>
        </div>
        <div class="col-md-4 offset-md-4">
        <h2 class="title">Selecione o conteúdo</h2>
        <div class="box">
        <select name="conteudo" id="conteudo">    
        </select>
        </form>
        <ul class="dropdown-menu">
        <script type="text/javascript">
        $(document).ready(function(){
            $('#disciplina').change(function(){
                $('#conteudo').load('conteudo.php?disciplina='+$('#disciplina').val());

            });
        });
        </script>
        </ul>
        </div>

That is, after the user selects a course, their respective contents will appear in another combo box, being made with javascript.

But since the user selected the content I want to appear automatically, searched from mysql, the link of the video embed youtube.

I did this in a non-automatic way for a representation. Follow the code below.

<figure>
  <div class="boxVideo">
  <iframe  width="700" height="450" src="https://www.youtube.com/embed/F9Bo89m2f6g" frameborder="0" allowfullscreen></iframe>
  </div>
  </figure>

How do I automatically embed the video link, after selecting the content of a particular discipline, appears below the page?

Illustration from the comic book: Table discipline, as well as the combo box that demonstrates the disciplines

Table content, with a FK, so that when selecting the discipline the content to be shown will prevail from which discipline was selected

OBSERVING: From a previous answer, it was observed that:

1- The content select is pulled from a javascript, that is, the value of it equals the content_id and following the value name.

2- An idea of solution would be a field as I did on the table "content", video content, that in this field would enter the embed code of the video, example "wjwudahw12" that would enter in "youtube.com/embed/wjwudahw12", as I can edit the "frame", for it to traverse through this field, after selecting discipline and content, and insert the embed code respective.

Answer 1

Friend, it seems that the problem lies in solving client-side programed server-side.

Are you trying to upload content within the select, to do this use the function $.get of jQuery:

var conteudos = $.get('conteudo.php?disciplina='+$('#disciplina').val());

This page conteudo.php must return a JSON:

[
  {
    value: "F9Bo89m2f6g",
    name: "Video 1"
  },
  {
    value: "AF7M17QX4QE",
    name: "Video 2"
  }
]

For so, you get popular the select in this way:

    $.each(conteudos, function (key, conteudo) {
      $("#conteudo")
        .append(
          "<option value=" + conteudo.value + ">" + conteudo.name + "</option>"
        );
    });

To show the video you can use the value of select of the contents, thus:

$("#conteudo").change(function () {
    var codigoVideo = $("#conteudo").val();
    var videoContainer = $("#video_container");
    videoContainer.html(`
    <iframe width="700" height="450" src="https://www.youtube.com/embed/${codigoVideo}" frameborder="0" allowfullscreen></iframe>`);
  });

Here’s an example working: https://codepen.io/kleberoliveira/pen/gOpNwYP