video borders collapsing on echo php statement

JonnyDriller · February 17, 2020

I've been working on my email screen, adding a video to it, and some Css. Which seems to work quite fine.

However when the page returns to the original screen (represented by the code 1.) It collapses the video image.

Makes it really long horizontally and thin vertically.

If I remove this first piece, showing that the email was sent successfully.

if(isset($_GET['Message'])){
    echo $_GET['Message'];
}

It returns to the screen fine and the video looks as it should.

Code1:-

<?php

if(isset($_GET['Message'])){
    echo $_GET['Message'];
}

$uri = $_SERVER['REQUEST_URI'];
$uri_dir = getcwd();
?>
<!DOCTYPE html>

<html>
<head>   
    <link href="/LifeSaverHTML/Details/Database/stylevid2.css" rel="stylesheet" type="text/css"> 
    
    <h1 class = "titler">
        LifeTube
    </h1>
    
    <p></p>
</head> 
<body> 
   <video class = "tube" controls src="examplevid.mp4">
        Your browser does not support the video tag.
    </video>        
    <p></p>
    <div style="margin: 0 auto; text-align: center">
        <a href='/PHPMailer/index.php?id=<?=$uri?>&dire=<?=$uri_dir?>' class="linker">Email Security</a>         
    </div>   
</body> 
</html>

I'm using this piece of CSS = Code2. I've set all the defaults padding etc to default for testing.

* {
  margin: 0;
  padding: 0;
}

As I say it looks great. Apart from when it returns with the email successful message. The whole thing just deflates.

Code2:-

* {
  margin: 0;
  padding: 0;
} 

body {
  background: url('/LifeSaverHTML/Details/Database/backround.jpg') no-repeat center center fixed; 
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.tube {
  display: block;
  margin: auto;
  width: 50%;
  height: 20%;
  border: 10px solid green;
}
    
.button {
  margin: 0 auto; 
  display:block; 
  text-align: center;
}
  
.linker {
    background-color: #23b83c;
    border: 2px solid #020353;
    color: whitesmoke;
    padding: 1em 1.5em;
    text-align: center;
    text-decoration: none;
    font-size: 1em;
    display: inline-block;
    width: 12%;
    border-radius: 5px;
    box-shadow: 3px 3px 8px 0 #000; /* h-offset v-offset blur spread color */
   
}

.linker:hover {
    color: red;    
}
  
.titler {
  width: 20%;
  text-align: center;
  margin: 0 auto;
  color: #FFFFFF;
  border: 5px ridge rgba(124,252,0);
  border-radius: 36px;
  background: #232323;
  text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
  }

nav {
  width: 80%;
  margin: 0 auto; }
nav ul {
  list-style: none;
  overflow: hidden; }
nav ul li {
  float: left;
  width: 20%; }
nav ul li a {
  text-align: center;
  padding: 8px 0;
  display: block;
  width: 100%;
  background: #cdeb8e; /* Old browsers */
  background: -moz-linear-gradient(top,
    #cdeb8e 0%, #b0ca34 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom,
    color-stop(0%,#cdeb8e),
    color-stop(100%,#b0ca34)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,
    #cdeb8e 0%,#b0ca34 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,
    #cdeb8e 0%,#b0ca34 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,
    #cdeb8e 0%,#b0ca34 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr=’#cdeb8e’,
    endColorstr=’#b0ca34′,GradientType=0 ); /* IE6-9 */
  }
nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
  color: #000;
  text-decoration: none; }
nav ul li a:hover,
nav ul li a:active {
  background: #b0ca34; /* Old browsers */
  background: -moz-linear-gradient(top,
    #b0ca34 0%, #96c40d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom,
    color-stop(0%,#b0ca34),
    color-stop(100%,#96c40d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,
    #b0ca34 0%,#96c40d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,
    #b0ca34 0%,#96c40d 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,
    #b0ca34 0%,#96c40d 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr=’#b0ca34′,
    endColorstr=’#96c40d’,GradientType=0 ); /* IE6-9 */
  }
nav ul li:first-child a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px; }
nav ul li:last-child a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px; }

Edited February 17, 2020 by JonnyDriller

JonnyDriller · February 17, 2020

Soz guys I wrapped it in a Div and stuck it at the bottom of my code. Seems to have worked out

<?php

$uri = $_SERVER['REQUEST_URI'];
$uri_dir = getcwd();
?>

<!DOCTYPE html>
<html>
<head>   
    <link href="/LifeSaverHTML/Details/Database/stylevid2.css" rel="stylesheet" type="text/css"> 
    
    <h1 class = "titler">
        LifeTube
    </h1>    
    <p></p>
    <nav>
  <ul>
    <li>
        <a href="/home.php">Home</a>
    </li>
    <li>
        <a href="/LifeSaverHTML/Database.php">Database</a>
    </li>
    <li>
        <a href="/LifeSaverHTML/mapper.php">GPS Map</a>
    </li>
    <li>
        <a href="/LifeSaverHTML/UpdateSearch.php">Update and Search</a>
    </li>
    <li>
        <a href="/LifeSaverHTML/Details/Database/index.php">Video</a>
    </li>
  </ul>
</nav>
<p></p>
</head> 
<body> 
   <video class = "tube" controls src="examplevid.mp4">
        Your browser does not support the video tag.
    </video>        
    <p></p>
    <div style="margin: 0 auto; text-align: center">
        <a href='/PHPMailer/index.php?id=<?=$uri?>&dire=<?=$uri_dir?>' class="linker">Email Security</a>         
    </div>   
</body>      
</html>

?php

if(isset($_GET['Message'])){    
    echo "<div id='emailmess'>";
    echo $_GET['Message'];
    echo "</div>";
}

?>

Edited February 17, 2020 by JonnyDriller

Sign In

video borders collapsing on echo php statement

Recommended Posts

JonnyDriller

Link to comment

Share on other sites

JonnyDriller

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information