JQuery background video does not cover whole the page - javascript

I am using Vide to play a video in the background.
Here is the playing div tag.
<div style="width: 1000px; height: 500px;"
data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>
when i change the style to
width: 100%; height: 100%;
The video disappears from the page. I want that video covers all page and I can scroll down.
Why does it happen?
How can I fix it?

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Body background example</title>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-vide-bg="video/ocean">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../libs/jquery/dist/jquery.min.js"><\/script>')</script>
<script src="../src/jquery.vide.js"></script>
</body>
</html>
This is fine just put scroll bar or use some jquery for scroll purpose.

if you want to cover all with the div and adjusted depending on the size of the screen, this is the code (Important, this is directive to the div):
style="
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
-webkit-background-size: cover;
background-size: cover;
background-image: none;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;"
if you want in the body, in the folder examples/body-bg.html is the examples for apply to the body only: https://github.com/VodkaBears/Vide/tree/master/examples

You are using the wrong units of measurement. If you pull the image in via CSS image-background then you can set the image-background-size to the contain property. It will insure that the video completely fits into it container (body, div, span, etc.).
body{
background-image:url(''your-video.mp4');
background-repeat:no-repeat;
image-background-size: contain;
}
Source: w3schools CSS3 background-size Property
You could also try using the height and width but use the vh and vw metrics. It sets the height and width based on the view ports dimensions.
Source: CSS Units

Related

How to clip your image freely

1st of all this is about the mobile version of a site
My goal is to take an image clip it in it's center and make it free for the user to move left and right as he pleases
I believe I am the wrong foot and clip value shouldn't be used don't take my code and try to fix it may be completely wrong
I have an idea to hide the image left and right somehow but I don't know how to implement it
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.center-cropped {
width: 500px;
height: 800px;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}
.center-cropped img {
min-height: 100%;
min-width: 100%;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* modern browsers */
opacity: 0;
}
</style>
</head>
<body>
<script>
</script>
<div class="center-cropped" style="background-image: url('office.gif');">
<img src="http://placehold.it/400x400" />
</div>
</body>
</html>

background-image style not working in HTML header

I'm trying to change the "background-image:" of a css class when a button is pressed.
JQuery:
$(function() {
$('button').on('click', function() {
$('.masthead2').css('background-image', 'url("../img/whiteheader.png")');
});
});
CSS:
.masthead2 {
position: relative;
width: 100%;
height: auto;
min-height: 35rem;
padding: 15rem 0;
background-image: url("../img/roseheader.png");
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
}
When I press the button, the "background-image:" in the CSS style is removed. Then the HTML changes from this:
<header class="masthead2">
To This:
<header class="masthead2" style='background-image: url("../img/whiteheader.png");'
However, on the page; no image is displayed at all. I've tried copying the url directly into the css and the new image is loaded. So I'm confident the url is correct.
If the background-image is changed directly in the css, this should solve the problem.
I have checked, complete code, it's working at my end, please check your image url, if image is present there.
Here is the code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link rel="stylesheet" href="style.css" />
<style>
.masthead2 {
position: relative;
width: 100%;
height: auto;
min-height: 35rem;
padding: 15rem 0;
background-image: url("https://lh3.googleusercontent.com/proxy/ogwfaF0iwa05OnTNQFyD0rZ384sAN74p5xwJE6qfJmrEFcmgxlXo4zg22lrlaLcaS_hp9pFCu8s8QZ-GgDy37DxWVOHpq2B4IV35vb4wgHBWfJiYqI_AVARVMaguPane4Raedg=w530-h212-p-rw");
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
}
</style>
</head>
<body>
<header class="masthead2"></header>
<button>Submit</button>
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script>
$(function() {
$('button').on('click', function() {
$('.masthead2').css('background-image', 'url("https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_%28business%29.svg/1200px-IMG_%28business%29.svg.png")');
});
});
</script>
</html>
the path to the image might be wrong. If it's inside the css the path is relative to the css file but inside html doesn't represent same location. Try an absolute path for the image.
e.g
$(function() {
$('button').on('click', function() {
$('.masthead2').css('background-image', 'url("http://www.mywebsite.com/img/whiteheader.png")');
});
});

Automatically resizing images when the browser width/height changes

I have a page with many images in divs and the layout looks good only in full size, when the browser window is smaller it's really messy. I found a similar question on stack overflow but their answers don't work for my case.
EDIT: I did everything what you guys advised but it still doesn't work.
<!DOCTYPE html>
<html>
<body background="">
<head>
<style>
div.asciigun {
top: 30%;
left: 50%;
position: absolute;
max-width: 100%;
}
</style>
</head>
<body>
<div class="asciigun">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU7ROirglSjKnpsLvt29uCDlVtpZutirtiXyg3FF0UtXFf0TnE" height="90%" width="90%" >
</div>
</body>
</html>
Let's try another approach. Try not to modify max-width or max-height. Just leave it as it is (or set width: 100% and height: 100%).
And then change <img src="url.jpg"> to background: url("url.jpg"); and then just do
.image {
background-size: cover;
}
or
.image {
background-size: contain;
}
Ok I figured it out! I needed viewport value instead of %. Now images go proportionally with browser size and stay in place.
div.asciigun {
position: absolute;
top: 30vw;
left: 74vw;
z-index: 1;
width: 30vw;
height: 15vw;
}

CSS preferred height with maximum height

I have a div that should have a maximum height and a preferred height. In the sample posted below, I have #test with a black background and a maximum height of 800px. When the browser view-port has sufficient available space, it should take 800px. If less space is available (i.e. mobile devices), the maximum amount of available space should be used. How can this be achieved with preferably just CSS?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Prototype</title>
<style>
body, html {
margin: 0;
height: 100%;
width: 100%;
}
#test {
background-color: black;
background-position: center;
background-repeat: no-repeat;
max-height: 600px;
max-width: 800px;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
Also include the following attributes to #test:
height: 100%;
width: 100%;
Fiddle link here: http://jsfiddle.net/Nx5Zb/
With embedded full-page result: http://jsfiddle.net/Nx5Zb/embedded/result/

Center logo in web page (vertically & Horizontally)

I have a logo (775 X 225) that I would like to center (both vertically and horizontally) in a web page and then have a link "Enter", placed underneath it
<html>
<head>
<Title> My website </Title>
<style type="text/css">
//centerlogo CSS class here ?
</style>
</head>
<body lang=EN-US>
<div class'centerlogo"> <span></span>
<img src="images/logo.jpg">
</div>
</body>
</html>
what is the best way to do this so that it is centered both vertically and horizontally and works in all browsers?
Can someone show me the CSS class if its the best method - or javascript code if it is the best method?
I tried looking at a few examples on here, but couldn't get any of them to work with my image.
thanks
Since the logo is a known size, then you can position it absolutely with negative margins equal to half the width and height.
.centerlogo {
position: absolute;
width: 775px;
height: 225px;
top: 50%;
left: 50%;
margin-left: -387px; //Half the width
margin-top: -112px; //Half the height
}
This will remain in the exact center of the screen regardless of the size of the window.
Do something like this on the item you want centered.
Here is an example of the output: http://jsfiddle.net/FjLQY/1/
img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 128px; /* height of item */
height: 128px; /* width of item */
}

Categories