Moin,
ich habe das Video soweit eingebunden, jedoch wird das Video beim mir im Header
bei einem 28 Zoll Monitor nicht bis zum Seitenrand dargestellt:
https://www.dropbox.com/s/60w6gpa8wvi8t34/Header.png?dl=0
Bei einem 13 und 17 Zoll Monitor läuft das ohne Probleme, muss ich das Video bearbeiten
oder kann das per Code sozusagen an den Seitenrändern angeheftet werden?
Ein weiteres Problem ist, dass beispielsweise beim Login:
https://www.dropbox.com/s/2bdbbuvy1zu8552/LogIn.png?dl=0
Da sieht das auf einmal so schmal aus.
header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body id="<?php print get_stylesheet(); ?>" <?php body_class(); ?>>
<?php do_action( 'body_top' ); ?>
<a class="skip-content" href="#main"><?php _e( 'Skip to content', 'chosen' ); ?></a>
<div id="overflow-container" class="overflow-container">
<div id="max-width" class="max-width">
<?php do_action( 'before_header' ); ?>
<header class="site-header" id="site-header" role="banner">
<div id="menu-primary-container" class="menu-primary-container">
<?php get_template_part( 'menu', 'primary' ); ?>
<?php get_template_part( 'content/search-bar' ); ?>
<?php ct_chosen_social_icons_output(); ?>
</div>
<button id="toggle-navigation" class="toggle-navigation" name="toggle-navigati$
<span class="screen-reader-text"><?php _ex( 'open menu', 'verb: open t$
<?php echo ct_chosen_svg_output( 'toggle-navigation' ); ?>
</button>
<div id="title-container" class="title-container">
<?php get_template_part( 'logo' ) ?>
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" vo$
<source src="wp-content/themes/chosen-child/images/header/cloud73.webm" type="video/w$
<source src="wp-content/themes/chosen-child/images/header/cloud73.mp4" type="video/mp$
<source src="wp-content/themes/chosen-child/images/header/cloud73.ogv" type="video/og$
</video>
<div id="video_pattern"></div>
<img src="wp-content/themes/chosen-child/images/header/750px-Hauptseite.png" usemap="#map" />
<map name="map">
<area shape="rect" coords="12,12,367,68" target="Unternehmensprozess" href="https://cloud-wiki.lin.hs-osnabrueck.de/?p=69" />
<area shape="rect" coords="382,12,737,67" target="IT-Systeme" />
<area shape="rect" coords="12,82,737,139" target="Praxisbeispiele" />
</map>
<?php if ( get_bloginfo( 'description' ) ) {
echo '<p class="tagline">' . esc_html( get_bloginfo( 'descript$
} ?>
</div>
</header>
<?php do_action( 'after_header' ); ?>
<section id="main" class="main" role="main">
<?php do_action( 'main_top' );
if ( function_exists( 'yoast_breadcrumb' ) ) {
yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );
}
Alles anzeigen
style.css:
.main {
width: 90%;
}
.site-header {
text-align: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
top: 0px;
left: 0px;
padding: 10px 0px 90px 0px;
width: 100%;
}
.overflow-container {
position: absolute;
overflow: hidden;
height: auto;
min-height: 100%;
padding: 0px;
}
.max-width {
max-width: 100%;
margin: 0 auto;
}
#video_background {
position: absolute;
top: 0px;
right: 0px;
min-width: 100%;
min-height:100% ;
width: auto;
height: 100%;
z-index: -1000;
overflow: hidden;
}
#video_pattern {
position: absolute;
opacity: 0.5;
left: 0px;
top: 0px;
width: 100%;
height: 10%;
z-index: -1;
}
Alles anzeigen
Vielleicht hatte jemand schon ähnliche Probleme und kann mir evtl. Tipps geben?
Danke 