Video zentrieren

Simuletsplay

Hallo... Ich habe das Problem, dass ich mein Video nicht zentrieren kann!

Hier meine Codes:

Code

<div id="content-video">    <div id="seitentext">

        <div id="text">
    <h2>Teamspeak-Vortstellung</h2>
    <p>Hey Leute!




<br>Ich stelle euch heute den Teamspeak von meinem/unserem Server vor!
<br>Ich hoffe, dass ich dir mit diesem Video ein kleinen Einblick geben konnte.
<br>
<br>Auf unserem Teamspeak, könnt ihr für euern YouTube-Kanal einen eigenen Channel bekommen. Wenn ihr Musik hören <br>wollt, müsst ihr einfach nur in unseren Musik-Channel gehen! Bei Fragen oder Problemen, kann dir unser <br>Support weiterhelfen, der täglich von 16-20 Uhr geöffnet ist.</p></div>
            <div id="div-channel-button">
                <button type="button" id="zum-video" onclick="location.href='ts3server://simuundquex.de'"><i class="fa fa-plus-square"></i> Zum Video!</button> </div>

            </div>
    <div id="seitenbild">
        <div id="video-div"><iframe width="560" id="video" height="315" src="https://www.youtube.com/embed/U_JOBqMO5Dg?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

    </div>

    </div>

Alles anzeigen

Code

#zum-video{
    background-color: transparent;
	border: none;
	color: #21b2a6;
    padding: 15px 32px;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
	border: 3px solid #21b2a6;
	-o-transition: color .2s ease-out, background .2s ease-in;
	-ms-transition: color .2s ease-out, background .2s ease-in;
	-moz-transition: color .2s ease-out, background .2s ease-in;
	-webkit-transition: color .2s ease-out, background .2s ease-in;
	transition:color .2s ease-out, background .2s ease-in;
	margin: 0;
	border-radius: 10px;
    margin-top: 30px;
    margin-left: 8px;
    float: center;
    width: 278px;
}
#zum-video:hover
{
    color: white;
	background-color: #21b2a6;
	border: 3px solid #21b2a6;
}
}
#div-channel-button
{
    float: left;
    width: 400px;
    display: flex;
	align-items: left;
	justify-content: left;
}
#seitentext #text
{
    margin-left: 8px;
    padding-right: 8px;
    color: black;
    font-size: 14px;
    float: center;
}
#seitenbild #video
{
    margin: 0 auto;
    float: center;
    display: flex;
	align-items: center;
	justify-content: center;
}
#seitenbild
{
    display: flex;
	align-items: center;
	justify-content: center;
}
#video-div
{
    display: block;
	align-items: center;
	justify-content: center;
    float: right;
}

Alles anzeigen

Sailor

Bitte spezifiziere deine Frage! Das Video ist zentriert in dem div id="seitenbild"
Da sich aber id="seitenbild" den Platz in der Zeile mit dem div id="div-channel-button" teilt, erscheint das Video nach rechts verrückt.
In diesem Bereich ist dein Layout mehr als unglücklich... ziehe mal das Browserfenster kleiner, dann wirst du sehen - null responsive und die Elemente überlappen!

Nebenbei: wenn du YouTube Videos einbettest, dann solltest du (nicht nur wegen der DSGVO) den 'erweiterten Datenschutzmodus' aktivieren. Lässt sich bei Youtube einstellen und ist dann im Einfügecode an der URL 'https://www.youtube-nocookie.com/embed....' zu erkennen.

Simuletsplay

Naja also Im Linken Teil soll der Titel des Videos und dazu eine kurze Beschreibung mit dem Button "Zum Video" zu sehen sein! Rechts soll einfach nur das Video zentiert sein!

Sailor

Dann verstehe ich deine Frage gar nicht mehr... genau das, was du schreibst, hast du doch!

sieht zwar in der Simulation möglicherweise etwas anders aus als bei dir im Original - aber das Layout sollte identisch sein.
Button und ggf Text links... rechts daneben (zentriert im div) das Video.
Hab nur zur besseren Orientierung Rahmen gesetzt... das siehst du auch, wo und wie die Elemente positioniert bzw zentriert sind.
Soll das anders sein? Dann mach doch mal eine Bild von deiner Wunschvorstellung. Gedanken lesen kann ich noch nicht.

Simuletsplay

Ich hab hier einmal die divs mit farben gekennzeichnet!
Den roten bereich, habe irgenwie nicht unter kontrolle! Denn der Div vom Video ist orange und genauso groß, wie das video!
Der muss aber die rote Fläche mit einnehmen!

Sailor

Das ist nicht mehr der ursprüngliche Code, den du im Anfangspost eingefügt hast! Um dir da weiter zu helfen, bräuchten wir den aktuellen Code - oder besser einen Link zur Seite.

Simuletsplay

Ok schicke ich dir morgen! Bin gerade nur am Handy!

Simuletsplay

Code

<head><meta charset="utf-8">
		<title>SimuUndQuex | Start</title>
		<link rel="stylesheet" href="stylesheet.css">
		<link rel="shortcut icon" href="/Bilder/server-icon.ico" type="image/x-icon">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="../styles/main.css">








</head>
<body>
<div id="menü-div"><nav>
			<ul>
				<li><a href="index.php"><i class="fa fa-home"></i> Start</a>
				<li><a href="news.php"><i class="fa fa-envelope-open-o"></i> News</a>
				<li><a href="clans.php"><i class="fa fa-group"></i> Clans</a>
				<li><a href="games.php"><i class="fa fa-gamepad"></i> Games</a>
				<li id="sonderbutton"><a href="bewerben.php"><i class="fa fa-edit"></i> Bewerben</a></li>
			</ul>
		</nav>
		</div>
<div id="content">
    <div id="seitentext">

        <div id="text">
    <h2>Kanal-Beschreibung</h2>
    <p>Herzlich Willkommen auf meinem YouTube-Kanal!
    <br>
    <br>Mein Name ist Ben und ich habe diesen Kanal, <br>um euch Teamspeak-Tutorials zu präsentieren oder auch <br>Gameplays zu zeigen.
    <br>Ich besitze ein eigenes Server-Team!
    <br>Server-Details:
    <br>
    <br>Teamspeak3: SimuUndQuex.de
    <br>
    <br>Wenn dir dieser Kanal gefällt, <br>kannst du ja mal ein Abo da lassen!
    <br>Ich hoffe, dass du mich länger verfolgen wirst <br>und Spaß auf meinem Kanal hast.</p></div>
            <div id="div-channel-button">
                <button type="button" id="zum-kanal" onclick="location.href='ts3server://simuundquex.de'"><i class="fa fa-microphone"></i> Besuche mich auf YouTube!</button> </div>
            </div>
    <div id="seitenbild">




    
    </div>
    </div>

<div id="content-video">
    <div id="seitentext">

        <div id="text">
    <h2>Teamspeak-Vortstellung</h2>
    <p>Hey Leute!




<br>Ich stelle euch heute den Teamspeak von meinem/unserem Server vor!
<br>Ich hoffe, dass ich dir mit diesem Video ein kleinen Einblick geben konnte.
<br>
<br>Auf unserem Teamspeak, könnt ihr für euern YouTube-Kanal einen eigenen Channel bekommen. Wenn ihr Musik hören <br>wollt, müsst ihr einfach nur in unseren Musik-Channel gehen! Bei Fragen oder Problemen, kann dir unser <br>Support weiterhelfen, der täglich von 16-20 Uhr geöffnet ist.</p></div>
            <div id="div-channel-button">
                <button type="button" id="zum-video" onclick="location.href='ts3server://simuundquex.de'"><i class="fa fa-plus-square"></i> Zum Video!</button> </div></div>





    <div id="seitenbild">

        <div id="video-div">

            <iframe width="560" id="video" height="315" src="https://www.youtube.com/embed/U_JOBqMO5Dg?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        </div>

    </div>

    </div>
</body>

Alles anzeigen

Code

nav{
	width: 1024px;
	border-bottom: 3px solid #21b2a6;
	background: #2e3842;
	color: white;
	align-items: center;
	justify-content: center;
	float: center;

}
ul a
{
    display: block;
}
ul
{
	width: 80%;
	margin: 0 auto;
	padding: 0;
    list-style: none;
}
ul li
{
    background: #2e3842;
	display: inline-block;
    align-items: right;
	justify-content: right;
}
ul li :hover
{
	background: #21b2a6;

}
ul li a
{
    color: #fff;
    text-decoration: none;
    display:block;
    padding:15px;
}




#sonderbutton
{
	background: #2e3842;
	list-style: none;
    display: inline-block;
}
@media screen and (max-width: 705px) {
  #sonderbutton::after {
     display: none;
  }  
}




#menü-div
{
	display: flex;
	align-items: center;
	justify-content: center;
    margin-bottom: 20px;
}
body
{
	margin: 0;
	padding: 0;
	font-family: verdana;
	padding-bottom: 20px;
    background-image: url("../Bilder/hintergrund/hintergrund-bild-webseite.jpg");
    color: white;

}
ul li h3
{
    font-size: 16px;
    margin-right: 20px;
}
#seiten-beschreibung
{
    display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	margin-bottom: 10px;
	border: #21b2a6 1px solid;
	width: 1044px;
	background-color: #2e3842;
    color: white;
}
.clan-liste
{
    display: flex;
	align-items: center;
	justify-content: center;
    width: 1024px;
    background-color: 
}
#menü-div li ul li {background-color:#2e3842;}
#menü-div li ul li a{color:#FFFFFF;}
#menü-div li ul li:hover {background-color:#232323;}
nav ul li ul {display: none;}
nav ul li:hover ul{ display: block; position: absolute;}
nav ul li ul li a { background-color:#2e3842; border-bottom: 3px solid #21b2a6;}
nav ul li ul li a:hover {background-color: #21b2a6;}
nav ul li ul li {position: relative;}
nav ul li ul li ul{display: none;}
nav ul li ul li:hover ul{display: block;position: absolute;
  left: 100%;
  top: 0;}




#content
{
    display: flex;
    width: 1024px;
    background-color: #2e3842;
    float: center;
    margin: auto;
    height: 600px;
    margin-bottom: 12px;
}
#content-video
{
    display: flex;
    width: 1024px;
    background-color: #2e3842;
    float: center;
    margin: auto;
    height: 450px;
    margin-bottom: 12px;
    background-color: red;
}
#seitentext
{
    background-color: white;
    display: inline-block;
	align-items: center;
	justify-content: center;
    width: 300px; 
}
#seitenbild
{
    background-color: #2e3842;
}
.youtube
{
    display: flex;
	align-items: center;
	justify-content: center;
    width: 1024px;
    background-color: #2e3842;
    float: center;
    margin: auto;
	margin-bottom: 20px;
	border: #000000 1px solid;
}












#zum-kanal
{
    background-color: transparent;
	border: none;
	color: firebrick;
    padding: 15px 32px;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
	border: 3px solid firebrick;
	-o-transition: color .2s ease-out, background .2s ease-in;
	-ms-transition: color .2s ease-out, background .2s ease-in;
	-moz-transition: color .2s ease-out, background .2s ease-in;
	-webkit-transition: color .2s ease-out, background .2s ease-in;
	transition:color .2s ease-out, background .2s ease-in;
	margin: 0;
	border-radius: 10px;
    margin-top: 30%;
    margin-left: 8px;
    float: center;

}
#zum-kanal:hover
{
    color: white;
	background-color: firebrick;
	border: 3px solid firebrick;
}
#zum-video
{
    background-color: transparent;
	border: none;
	color: #21b2a6;
    padding: 15px 32px;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
	border: 3px solid #21b2a6;
	-o-transition: color .2s ease-out, background .2s ease-in;
	-ms-transition: color .2s ease-out, background .2s ease-in;
	-moz-transition: color .2s ease-out, background .2s ease-in;
	-webkit-transition: color .2s ease-out, background .2s ease-in;
	transition:color .2s ease-out, background .2s ease-in;
	margin: 0;
	border-radius: 10px;
    margin-top: 30px;
    margin-left: 8px;
    float: center;
    width: 278px;
}
#zum-video:hover
{
    color: white;
	background-color: #21b2a6;
	border: 3px solid #21b2a6;
}
}
#div-channel-button
{
    float: left;
    width: 400px;
    display: flex;
	align-items: left;
	justify-content: left;
}
#seitentext #text
{
    margin-left: 8px;
    padding-right: 8px;
    color: black;
    font-size: 14px;
    float: center;
}
#video
{
    margin: 0 auto;
    display: block;
}
#seitenbild
{
    display: flex;
	align-items: center;
	justify-content: center;
    background: orange;
}
#video-div
{
    display: block;
    margin: 0 auto;
    border: 3px solid #21b2a6;
    border-radius: 10px;
    padding: 8px;
    background: yellow;
}

Alles anzeigen

Ich hab einfach mal alles hinzugefügt!

Sailor

Ich habe mal den Code etwas modifiziert und wo nötig korrigiert. Waren zu viele Einzelpunkte, um die hier einzeln aufzuführen - überwiegend fehlerhafte CSS Formatierungen.
Hier mal der überarbeitete Code... so wie ich denke, dass es passt.
HTML

HTML

<!doctype html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>SimuUndQuex | Start</title>
   <link rel="stylesheet" href="stylesheet.css">
   <link rel="shortcut icon" href="/Bilder/server-icon.ico" type="image/x-icon">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="../styles/main.css">
</head>
<body>
   <div id="menü-div">
      <nav>
         <ul>
            <li><a href="index.php"><i class="fa fa-home"></i> Start</a></li>
            <li><a href="news.php"><i class="fa fa-envelope-open-o"></i> News</a></li>
            <li><a href="clans.php"><i class="fa fa-group"></i> Clans</a></li>
            <li><a href="games.php"><i class="fa fa-gamepad"></i> Games</a></li>
             <li id="sonderbutton"><a href="bewerben.php"><i  class="fa fa-edit"></i> Bewerben</a></li>
         </ul>
      </nav>
   </div>
   <div id="content">
      <div class="seitentext">
         <div class="text">
            <h2>Kanal-Beschreibung</h2>
               <p>Herzlich Willkommen auf meinem YouTube-Kanal!
               <br>
               <br>Mein Name ist Ben und ich habe diesen Kanal,
               <br>um euch Teamspeak-Tutorials zu präsentieren oder auch
               <br>Gameplays zu zeigen.
               <br>Ich besitze ein eigenes Server-Team!
               <br>Server-Details:
               <br>
               <br>Teamspeak3: SimuUndQuex.de
               <br>
               <br>Wenn dir dieser Kanal gefällt,
               <br>kannst du ja mal ein Abo da lassen!
               <br>Ich hoffe, dass du mich länger verfolgen wirst
               <br>und Spaß auf meinem Kanal hast.
               </p>
         </div>
         <div class="div-channel-button">
             <button type="button" id="zum-kanal"  onclick="location.href='ts3server://simuundquex.de'"><i class="fa  fa-microphone"></i> Besuche mich auf YouTube!</button>
         </div>
      </div>
      <div class="seitenbild">


         <!-- Hier fehlt das Bild -->


      </div>
   </div>
<div id="content-video">
    <div class="seitentext">
        <div class="text">
           <h2>Teamspeak-Vortstellung</h2>
           <p>Hey Leute!
           <br>Ich stelle euch heute den Teamspeak von meinem/unserem Server vor!
           <br>Ich hoffe, dass ich dir mit diesem Video ein kleinen Einblick geben konnte.
           <br>
            <br>Auf unserem Teamspeak, könnt ihr für euern YouTube-Kanal  einen eigenen Channel bekommen. Wenn ihr Musik hören
           <br>wollt, müsst ihr einfach nur in unseren Musik-Channel gehen! Bei Fragen oder Problemen, kann dir unser
           <br>Support weiterhelfen, der täglich von 16-20 Uhr geöffnet ist.
           </p>
        </div>
    <div id="div-channel-button">
         <button type="button" id="zum-video"  onclick="location.href='ts3server://simuundquex.de'"><i class="fa  fa-plus-square"></i> Zum Video!</button>
    </div>
</div>
    <div class="seitenbild">
        <div id="video-div">
            <iframe id="video"  src="https://https://www.youtube-nocookie.com/embed/U_JOBqMO5Dg?rel=0"  allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
    </div>
</div>
</body>

Alles anzeigen

und das CSS

HTML

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    font-family: verdana;
    padding-bottom: 20px;
    background-image: url("../Bilder/hintergrund/hintergrund-bild-webseite.jpg");
    color: white;
}
nav{
     width: 100%;
     max-width: 1024px;
     margin: 0 auto;
     border-bottom: 3px solid #21b2a6;
     background: #2e3842;
     color: white;
}
ul a {
    display: block;
}
ul {
    width: 80%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
ul li {
    background: #2e3842;
    display: inline-block;
}
ul li :hover {
    background: #21b2a6;
}
ul li a {
    color: #fff;
    text-decoration: none;
    display:block;
    padding:15px;
}
#sonderbutton {
    background: #2e3842;
    list-style: none;
    display: inline-block;
}
@media screen and (max-width: 705px) {
    #sonderbutton::after {
    display: none;
  }
}
#menü-div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
ul li h3 {
    font-size: 16px;
    margin-right: 20px;
}
#seiten-beschreibung {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 10px;
    border: #21b2a6 1px solid;
    width: 1044px;
    background-color: #2e3842;
    color: white;
}
.clan-liste {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1024px;
    background-color: transparent;
}
#menü-div li ul li {
    background-color:#2e3842;
}
#menü-div li ul li a {
    color:#FFFFFF;
}
#menü-div li ul li:hover {
    background-color:#232323;
}
nav ul li ul {
    display: none;
}
nav ul li:hover ul {
    display: block; position: absolute;
}
nav ul li ul li a {
    background-color:#2e3842; border-bottom: 3px solid #21b2a6;
}
nav ul li ul li a:hover {
    background-color: #21b2a6;
}
nav ul li ul li {
    position: relative;
}
nav ul li ul li ul {
    display: none;
}
nav ul li ul li:hover ul {
    display: block;position: absolute;
    left: 100%;
    top: 0;
}
#content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1024px;
    background-color: #2e3842;
    margin: 0 auto 12px auto;
    height: 600px;
}
#content-video {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1024px;
    background-color: #2e3842;
    margin: 0 auto 12px auto;
    height: 450px;
    background-color: red;
}
.seitentext {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    max-width: 300px;
    height: 100%;
}
.seitenbild {
    background-color: #2e3842;
    text-align: center;
    vertical-align: bottom;
    width: 100%;
    height: 100%;
    background: orange;
}
.youtube {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1024px;
    background-color: #2e3842;
    margin: auto;
    margin-bottom: 20px;
    border: #000000 1px solid;
}
#zum-kanal {
    background-color: transparent;
    border: none;
    color: firebrick;
    padding: 15px 32px;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border: 3px solid firebrick;
    -o-transition: color .2s ease-out, background .2s ease-in;
    -ms-transition: color .2s ease-out, background .2s ease-in;
    -moz-transition: color .2s ease-out, background .2s ease-in;
    -webkit-transition: color .2s ease-out, background .2s ease-in;
    transition:color .2s ease-out, background .2s ease-in;
    border-radius: 10px;
    margin: 4px auto;
}
#zum-kanal:hover {
    color: white;
    background-color: firebrick;
    border: 3px solid firebrick;
}
#zum-video {
    background-color: transparent;
    border: none;
    color: #21b2a6;
    padding: 15px 32px;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border: 3px solid #21b2a6;
    -o-transition: color .2s ease-out, background .2s ease-in;
    -ms-transition: color .2s ease-out, background .2s ease-in;
    -moz-transition: color .2s ease-out, background .2s ease-in;
    -webkit-transition: color .2s ease-out, background .2s ease-in;
    transition:color .2s ease-out, background .2s ease-in;
    margin: 0;
    border-radius: 10px;
    margin: 4px auto;
    width: 278px;
}
#zum-video:hover {
    color: white;
    background-color: #21b2a6;
    border: 3px solid #21b2a6;
}
.div-channel-button {
    text-align: center;
    width: 100%;
    max-width: 300px;
}
.seitentext .text {
    margin-left: 8px;
    padding-right: 8px;
    color: black;
    font-size: 14px;
}
#video {
    margin: 0 auto;
    display: block;
}
#video-div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    margin: 0 auto;
    border: 3px solid #21b2a6;
    border-radius: 10px;
    padding: 8px;
    background: yellow;
}
iframe#video {
   width: 560px;
   height: 315px;
   border: 0;
}

Alles anzeigen

Vielleicht kannst du damit ja was anfangen und kommst deinen Vorstellungen zu Layout etwas näher.

Video zentrieren

Tags

Benutzer online in diesem Thema