如何在响应式视频下显示标题

时间:2016-09-08 04:55:22

标签: php html mysql

我正在处理的网页上有一个带有字幕文字的嵌入视频。我将嵌入式视频和标题文本存储在MySQL数据库中。使用CSS,我使嵌入视频响应,以便用户可以使用他们的手机观看视频。出于某种原因,响应视频下的标题文本未显示。当我在台式计算机上查看时,标题会显示在视频下方,但是,当视频响应时,标题文本会消失。而且,响应视频被裁剪,不显示完整的视频。有没有办法解决这个问题?如何在视频响应时显示文本。 Responsive video but caption is missing谢谢你的时间。

这是代码:

<!DOCTYPE html>
<html>
  <head>
    <link type='text/css' rel='stylesheet' href='style.css'/>
    <title>PHP!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.another-container {
    max-width: 600px;
    display: block;
    margin-left: auto;
    margin-right: auto
}

</style>
  </head>
  <body>  
      <?php
      @$id=$_GET["id"];
if(isset($_GET['id'])) {
   $id=intval($_GET['id']);
} else {
   echo '<p>The page you were looking for isn\'t where you thought it was. Sorry about that. &nbsp; &nbsp; <a href="gallery.php">Go back to gallery </a> </p>';
} 
      ?>
     <?php
        if (isset($_GET['id'])) { 
        $id=intval($_GET['id']); 
        $con=mysqli_connect("localhost","root","","image_display");
        $result=mysqli_query($con,"select * from table1 WHERE id=$id");
        if (mysqli_num_rows($result ) > 0) {
            $row=mysqli_fetch_array($result,MYSQLI_ASSOC);
            echo '<div class="another-container">';
            echo '<div class="video-container">';
            echo '<iframe src="'.$row["video"].'" frameborder=0 width=560 height=315 scrolling=no allowfullscreen mozallowfullscreen webkitallowfullscreen sandbox="allow-same-origin allow-scripts allow-forms"></iframe> <br>';
            echo '<h2>' . $row['caption'].'</h2>';
            echo '<p><a href="gallery.php">Back to gallery </a></p>';
            echo '</div>';
            echo '</div>';
            echo '</div>';
        }
        else{
            echo '<p>No Image Found &nbsp; &nbsp; <a href="gallery.php">Back to gallery </a> </p>';
        }
    } 
      ?>
  </body>
</html>

0 个答案:

没有答案