Javascript 01

<html>
    <head>
        <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <title>Cadastro</title>
    </head>
    <body>
<div class="container">
    <br><br><br>
    Imagem ou vídeo do youtube?
    <br><br><br>
<form action="saveData.php" method="post">
  <div class="form-check">
  <input type="radio" class="form-check-input" name="mediaType" value="image" onclick="generateTag()"> Image
</div>
  <div class="form-check">
  <input type="radio" class="form-check-input" name="mediaType" value="youtube" onclick="generateTag()"> Youtube Video
  </div>
  <br>
  <div class="form-group">
  <textarea class="form-control" id="output" name="output"></textarea>
  </div>
  <input type="hidden" id="hiddenOutput" name="hiddenOutput" value="">
  <input type="submit" class="btn btn-primary" value="Save" onclick="document.getElementById('hiddenOutput').value = document.getElementById('output').value">
</form>

<script>
      function generateTag() {
        var radioValue = document.querySelector('input[name="mediaType"]:checked').value;
        var textArea = document.getElementById("output");
        if (radioValue === "image") {
          textArea.innerHTML = '<img src="" alt="" class="img-fluid">';
        } else if (radioValue === "youtube") {
          textArea.innerHTML = '<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/" allowfullscreen></iframe> </div>';
        }
        document.getElementById('hiddenOutput').value = textArea.innerHTML;
      }
    </script>

    </div>
    </body>
    </html>