Как динамически добавить видео с Javascript с помощью API?

Question

Я использую [The Mov ie Database API] (https://developers.themoviedb.org/3/getting-started/append-to-response), чтобы добавить трейлер mov ie в HTML.

У меня есть сборка работает и вытягивает правильный mov ie и его видео - но как мне заставить видео фактически показываться после загрузки?

var searchTerm="";

searchTerm = $("#search-input").val();
    let tmdbFetch = "https://api.themoviedb.org/3/search/movie?api_key=" + tmdbAPI + "&query=" + searchTerm;
fetch(tmdbFetch)
    .then((response) => {
        return response.json();
    })

// Movie Trailer
        var movieID = response.results[0].id;
        let tmdbTrailer = "http://api.themoviedb.org/3/movie/" + movieID + "/videos?api_key=" + tmdbAPI;
        fetch(tmdbTrailer)
        .then((responseVid) => {
            console.log(responseVid);
            return responseVid.json();
        })
        .then((responseVid) => {
            var trailer = document.createElement("a");
            trailer.textContent = " Movie Trailer";
            trailer.setAttribute("id", "trailer");
            trailer.src = responseVid.url;
            var movieDesc = document.getElementById("movie-description");
            movieDesc.appendChild(trailer);
        })

 <!-- Submit Form -->
    <div class="grid-container fluid">
        <div class="input-group">
            <!-- Search Label with Magnifying Glass -->
            <span class="input-group-label"><i class="fas fa-search"></i></span>
            <input id="search-input" class="input-group-field" type="text" placeholder="Type a Book Name to Search">
            <div class="input-group-button">
              <input type="submit" class="button" value="Submit">
            </div>
        </div>
    </div>

<!-- Movie Description -->
                <div class="grid-x grid-margin-x">
                    <div id="movie-description" class="text-justify"></div>
                </div>