Estoy creando mi pagina para descargar videos de YouTube. Ya el código tiene la forma de llamar una variable para que muestre el thumbnail del video en un DIV. El problema es cuando intento llamar la variable para que muestre el video en el iframe:
<iframe id="iframe" style="width: 560px; height: 315px"
src="//www.youtube.com/embed/<?= htmlspecialchars($urlVideo) ?>"
data-autoplay-src="//www.youtube.com/embed/<?= htmlspecialchars($urlVideo) ?>?autoplay=1"></iframe>
Aqui les dejo el codigo completo por si ustedes saben como encontrar la variable y llamarla al iframe. Aqui tambien les dejo la url de la página: https://abrahamjuarbe.us/jytdownload/
Aqui tambien les dejo el codigo fuente en GITHUB, que muy probablemente les pueda ayudar: https://github.com/ScarletsFiction/LittleYoutube-PHP
<head>
<title>JYTDownload</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="example/style.css">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">JYTDownload</h3>
<script type="text/javascript">function hideNext(){$('#nextButton').css('display', 'none');}</script>
<nav class="nav nav-masthead">
<a onclick="hideNext()" class="nav-link active" href="#collapseVideo" data-toggle="tab">Video</a>
<a onclick="hideNext()" class="nav-link" href="#collapseChannel" data-toggle="tab">Canal</a>
<a onclick="hideNext()" class="nav-link" href="#collapsePlaylist" data-toggle="tab">Playlist</a>
<a onclick="hideNext()" class="nav-link" href="#collapseSearch" data-toggle="tab">Buscar</a>
</nav>
</div>
</div>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="inner cover">
<div id='content' class="tab-content">
<div class="tab-pane fade active show" aria-expanded="true" id="collapseVideo">
<div class="form-group">
<label>URL del Video:</label>
<input type="text" class="form-control text-half" id="urlVideo">
<small id="urlVideoText" class="form-text text-muted"></small>
</div>
<p class="lead">
<p id="videoError"></p>
<a onclick="videoButton()" class="btn btn-lg btn-secondary">DESCARGAR</a>
</p>
<div id="videoDetail" style="display: none">
<h2 id="title"></h2>
<p id="info"></p>
<p id="like"></p>
<img id="picture" src="" alt="" height="340px"/><br><br>
</div>
<div id="encoded" style="display: none">
<label>Codificado (Audio+Video):</label>
<div class="button-group">
</div><br>
</div>
<div id="adaptive" style="display: none">
<label>Adaptado (Solo Audio o Video):</label>
<div class="button-group">
</div><br>
<a id="mediaCombiner" onclick="initMediaCombiner()" type="button" class="btn btn-secondary">Medios Combinados</a>
</div><br><br>
<div id="subtitle" style="display: none">
<label>Subtítulos:</label>
<div class="button-group">
</div>
</div>
</div>
<div class="tab-pane fade" id="collapseChannel">
<div class="form-group">
<label>URL del Canal:</label>
<input type="text" class="form-control text-half" id="urlChannel">
<small id="urlChannelText" class="form-text text-muted"></small>
</div>
<p class="lead">
<p id="channelError"></p>
<a onclick="channelButton()" class="btn btn-lg btn-secondary">DESCARGAR</a>
</p>
<div id="channelGroupList" style="width: 760px;margin: 0 auto;" class="list-group">
</div>
</div>
<div class="tab-pane fade" id="collapsePlaylist">
<div class="form-group">
<label>URL del Lista de Reproducción:</label>
<input type="text" class="form-control text-half" id="urlPlaylist">
<small id="urlPlaylistText" class="form-text text-muted"></small>
</div>
<p class="lead">
<p id="playlistError"></p>
<a onclick="playlistButton()" class="btn btn-lg btn-secondary">DESCARGAR</a>
</p>
<div id="playlistGroupList" style="width: 760px;margin: 0 auto;" class="list-group">
</div>
</div>
<div class="tab-pane fade" id="collapseSearch">
<div class="form-group">
<label>Buscar en YouTube:</label>
<input type="text" class="form-control text-half" id="urlSearch">
<small id="urlSearchText" class="form-text text-muted"></small>
</div>
<p class="lead">
<p id="searchError"></p>
<a onclick="searchButton()" class="btn btn-lg btn-secondary">BUSCAR</a>
</p>
<div id="searchGroupList" style="width: 760px;margin: 0 auto;" class="list-group">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mastfoot">
<button id="nextButton" onclick="searchButton(true)" style="margin-top: 20px;display: none;">PRÓXIMO</button>
<div class="inner">
<p>¿Alguna vez has soñado con poner tu propio canal en tu propio sitio web?<br><a href="https://github.com/ScarletsFiction/LittleYoutube-PHP" target="_blank">LittleYoutube</a> está aquí para ayudarte</p>
</div>
</div>
<script src="example/script.js"></script>