I am trying for a video background on my index page which works fine on HTML page but doesn't work on PHP.
<div class="header-container"> <div class = "video-container"> <video preload = "true" autoplay = "autoplay" loop= "loop" volume = "0" poster = "pic.jpg"> <source src = "mp4/fa.mp4" type="video/mp4" > </video> </div> </div>
.header-container { width:100%; height: 900px; border-left: none; border-right: none; position: relative; padding: 20px; }
.video-container { position: absolute; top: 0%; left: 0%; height: 100%; width: 100%; overflow: hidden; }
video { position: absolute; z-index: -1; opacity: 0.78; width: 100%; }
I want to make it work on php.
I am not able to figure out why it isn't playing on localhost, although it displays the text content perfectly. Only video playback is not visible.
Related
So on my website, I have a video set as a background, everything I put underneath the video shows, but everything on top won't show.
index.php
<link rel="stylesheet" href="css/index.css">
<body>
<div class="navigation">
Updates
|
Start
|
Login
</div>
<video autoplay muted loop id="background_video">
<source src="assets/backgrounds/index_background.mp4" type="video/mp4">
</video>
style.css
.navigation{
position: absolute;
color: white;
z-index: auto;
float: none;
list-style-type: none;
background-color: white;
position: fixed;
}
#background_video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 50%;
z-index: 0;
}
The problem is with the z-index.
The z-index of the ".navigation" class must be greater/higher than the z-index of the video element with the ID "#background_video".
And you cannot use two "position" in ".navigation" class. The "absolute" is being overwritten by "fixed".
I want to recreate this: DEMO
HTML
<header role="banner">
<div id="wrapper-video">
<video poster="" autoplay loop>
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/cut.mp4"
type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
</video>
</div>
</header>
CSS
section[role="banner"] {
position: relative;
width: 100%;
}
#wrapper-video {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
z-index: -100;
}
#wrapper-video video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
...but replace the video with a YouTube video loaded via YouTube's API which loads the player into a DIV like this:
<div id="player"></div>
But as soon as I start to change the html the centering is off, even if I change the above to an image (as proof of concept) the centering is also off. What am I doing wrong here?
Does #wrapper-video video do something unexpected if I just change it to #wrapper-video2 and rename the DIV it was in?
#player will be replaced with an iframe. Here' how you would use that responsive code with the youtube API.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE'
});
}
section[role="banner"] {
position: relative;
width: 100%;
}
#wrapper-video {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
z-index: -100;
}
#wrapper-video video,
#wrapper-video iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
<header role="banner">
<div id="wrapper-video">
<div id="player"></div>
</div>
</header>
I have been using PHP and ImageMagick for to generate a 3D preview of a canvas print (see image below).
There are options to change the edge type, depth, size etc which are AJAX calls to a PHP support file which re-renders the preview with new settings and I reload it into the DOM.
This is starting to overload our server when busy. So I thought I could do this in CSS3 and do all the preview rendering client-side instead.
Here's what I have so far:
<div class="wrapper">
<div class="inner">
<div>
<img src="http://lorempixel.com/200/200/nature" alt="Nature">
</div>
</div>
</div>
.wrapper {
perspective: 500px;
margin: 4em auto;
width: 37em;
}
.inner {
transform: rotateY(40deg);
}
.inner div {
width: 11em;
display: inline-block;
margin-right: 1em;
}
.inner img {
display: block;
height: auto;
max-width: 100%;
margin: 0 auto;
}
The problem I am having is wrapping the image around the edges like in the image above. How can I do this?
I have done a demo, with 2 elements holding the same image.
Just set the image origin on them accordingly to the dimension, and it will match.
.main {
width: 400px;
height: 300px;
border: solid 1px red;
background-image: url(http://lorempixel.com/400/300);
background-size: 0px 0px;
perspective: 500px;
position: relative;
}
.front {
position: absolute;
width: 360px;
height: 100%;
left: 40px;
top: 0px;
transform: rotateY(45deg);
transform-origin: left center;
background-image: inherit;
background-position: -40px 0px;
}
.side {
position: absolute;
width: 40px;
height: 100%;
left: 0px;
top: 0px;
transform: rotateY(-45deg);
transform-origin: right center;
background-image: inherit;
background-position: 0px 0px;
}
<div class="main">
<div class="side"></div>
<div class="front"></div>
</div>
I have a searchbar in my header, which I need centered horizontally and just a little bit above the bottom of the header. I was able to achieve this by using
display: flex;
justify-content: center;
align-items: center;
The problem I am having now is that although it is responsive when you make the window smaller horizontally, It is a total mess when you resize the window vertically. I am pretty sure it's because I used margin-top: 350px; to set the vertical position. I also would much rather not use flex display because it isn't supported by much yet. Below is a screenshot of how it looks normaly, and one of how it looks when the view is altered vertically. Also the code pertaining to it. If anyone could help me figure out how to get the searchbar to be responsive vertically, that would be great!
How it is normally:
How it looks when you change the screen size vertically (the searchbar is behind the images):
HTML:
<div class="outcont">
<div id="top" class="header">
<div class="wrap">
<div class="col1"><img class="logoi" src="<?php bloginfo('stylesheet_directory'); ?>/images/main-logo.png" alt="<?php bloginfo('name'); ?> Logo" /></div>
<div class="col2"><?php wp_nav_menu(array('menu' => 'global-nav', 'container' => '')); ?></div>
</div>
<?php get_search_form(); ?>
</div>
CSS:
#searchform div {
shadow: 4px 7px 4px #000000;
margin-top: 350px;
display: flex;
justify-content: center;
align-items: center;
}
#searchform .text {
font-family: 'Merriweather';
padding-left: 35px;
height: 75px;
width: 600px;
font-size: 220%;
color: #B7B7B7;
border-radius: 50px;
background: white url('images/search-img.png') no-repeat;
background-position: 96% center;
}
#searchform .text:focus {
background-image: none;
}
#searchform .text img {
margin-right: 25px;
}
Check out this Fiddle I have made for you.
I have my main div with a background-image and the input inside of that div with the css like so:
#hero {
background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
height: 100vh;
margin-bottom: 0px;
right: 0;
}
#hero input {
position: absolute;
width: 200px;
height: 34px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 5px 10px;
border-radius: 50px;
outline: none;
}
This way the textbox will always stay in the center of the image no matter how the browser is scaled. In order for this to work the textbox must have a defined width and height.
So in your case replace your css for the searchbox with the css I have for #hero input and set the parent divs position to relative with position: relative;.
Please let me know how this works out for you.
Hope this helps!
I have a simple PHP website, that uses PHP only to include another files in index.php, so you may consider it uses HTML only.
The problem is that when viewing a one page of the site in my laptop, it seems to display normally, while viewing it from my smartphone or PC makes it very strange.
Here is the link: strasbourgmeetings.org/rigaCloud/login: you will find two-color page there with a semi-transparent login form in the middle. Well the problem is that only my laptop displays it in the middle, but my PC and other devices are not.
Yes, I know there is a horrible CSS code, but, anyway, I would highly appreciate your help to place this block in the middle.
P.S.: I thought that top: 50%; left: 50% and margin: -25% 0 0 -25% will make it centered, but...
That is the HTML I use:
<div class="white"></div>
<div class="blue"></div>
<div class="heraldry"></div>
<!--</div>-->
<section class="container">
<div class="login">
<div class="loginOpacity"></div>
<h1>Login to RigaCloud</h1>
<form method="post" action="index.html">
<p><input type="text" name="login" value="" placeholder="Username or Email"></p>
<p><input type="password" name="password" value="" placeholder="Password"></p>
<p class="remember_me">
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Remember me on this computer
</label>
</p>
<p class="submit"><input type="submit" name="commit" value="Login"></p>
</form>
</div>
<!--<div class="login-help">-->
<!--<p>Forgot your password? Click here to reset it.</p>-->
<!--</div>-->
</section>
.white {
position: absolute;
top: 0;
width: 100%;
height: 50%;
}
.blue {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
z-index: -1;
}
.heraldry {
position: absolute;
top: 50%;
left: 50%;
width: 728px;
height: 428px;
margin: -214px 0 0 -364px;
}
.container {
margin: 80px auto 0 -25%;
width: 640px;
position: absolute;
top: 10%;
left: 50%;
}
.containerOpacity {
margin: 90px auto 0 -25%;
width: 640px;
position: absolute;
top: 10%;
left: 50%;
}
.login {
position: absolute;
left: 50%;
top: 50%;
//margin: 0 auto;
margin: 0 auto 0 -25%;
padding: 20px 20px 20px;
width: 310px;
}
.login:before {
content: '';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
}
.loginOpacity {
background: #000;
position: absolute;
width: 310px;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
margin: 0 auto;
padding: 20px 20px 20px;
}
Using auto for the left and right-margins will centre an element within its parent (together with other suitable css rules). However, your whole login form is within a section <section class="container"> which is absolutely positioned. You should concentrate on centring this container element, which will probably require removing its absolute positioning.
BTW Your login is also not centred if you reduce your browser's width on your laptop.
Give it a specific width and do margin: 0 auto;
This is my way of centering an element with no specific width.
You can use this method for text, images, buttons etc!
/* The HTML */
<div class="container">
<div class="content"></div>
</div>
/* The CSS */
.container {
float: left;
position: relative;
left: 50%;
}
.content {
float: left;
position: relative;
left: -50%;
}