I'm running bigvideo.js on my webpage, with the set-up provided here (https://stackoverflow.com/a/17581187/1318135).
I'd like the have a background image display when bigvideo.js is incompatible with a user's set-up (scripts disabled, old browser, etc.) but the javascript overrides all attempts to add a background in the html/css.
How can I implement one? Right now it defaults to a black background.
This isn't perfect, but I used css to set a background image:
#video{
width: 100%;
height: auto;
min-width: 100%;
min-height: 100%;
z-index: -1;
background-image: url('/video/img/first.png');
background-repeat:no-repeat;
background-size: 100% 100%;
}
Then just like normal:
$(function() {
var BV = new $.BigVideo({controls:false,
container:$('#video')});
BV.init();
BV.show('/video/video/764116.mp4');
});
To get a png of the first frame you can use VLC (Video -> Take snapshot).
Related
I'm used to react native and trying my hand at reactjs, however I'm getting really frustrated with myself as I understand a lot of how react works from using react native but I can't style my components properly as I'm not used to css.
I'm using the ant design UI framework to help me build a small web application, and as of now I have my nav bar along the top of the app but want to set an image below that takes up 100% of the screen and have the height auto set to the aspect ratio.
I'm currently trying this but it doesn't work.
<div className="background">
</div>
//In App.css
.background {
background-image: url('./assets/main-image.jpg');
background-size: 'contain';
width: 100%;
height: auto;
}
I've tried the above but and a few other methods but nothing is working. It appears that the height is dependent upon whatever the content inside the div is. For example, if I place a h1 tag inside the div then I can see the image but only a few pixels in height.
My image is 4000px in width and is landscape. I just want to be able to dynamically display the image depending on screen resolution.
Can someone point me in the right direction?
Thanks
Edit: I've now set my css background class to this and it's nearly there.
background-image: url('./assets/main-image.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
The only issue is now I'm left with a decent size of padding below the image due to it rendering the full height of my view port
Try this:
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
Is there a way to modify how the fullscreen functionality of a video behaves in a browser? I would like to display the video on the left side of my screen and an image (actually a PDF) on the right side.
I have tried it with css in chrome:
video:-webkit-full-screen
And that gave me some results, but not the desired one. Should I create a custom action for this? And if so, how can I let the video break out of the borders of the browsers?
You should insert the <video> tag inside a <div> with a defined height and width with the following attributes:
.video-container {
position: relative;
height: auto;
width: 60%;
}
video {
width: 100%;
max-width: 500px; // Or whatever value on your choice
height: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
With a width of 100%, the video would fill the entire browser space but limit how big it can be by setting a max-width or max-height for the resolution and the responsiveness. I hope that my answer helps you!
EDIT
To fit in properly inside a div, you have to assign to the container position: relative and position: absolute to the video itself. If you want to break out from the borders, then you have to tweak the dimensions of max-height and max-widthof the video.
Check this question, since it is similar to yours.
I am trying to make a instagram style explore page but i have one question here. I have created this DEMO from codepen.io .
In this demo you can see the images. The images width and height is different not a same. I want to crop that images with CSS Like this DEMO page.
The difference between the first and second demo
First demo :
.exPex {
width: 100%;
}
Second Demo:
.exPex {
width: 200%;
}
So second demo working just in crome but this is not good idea i think. Anyone can tell me, How do I obtain the results of their second demo?
You could set the images up as background images and use background-size: cover; to get the effect that you're looking for (DEMO). This has the downside that your users will not be able to right-click or drag the images (to save them, etc.) as they might be expecting to do.
HTML for an example image:
<div class="_jjzlb" style="background-image:url('http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg');">
</div>
CSS:
._jjzlb {
position: relative;
padding-top: 100%;
width: 100%;
overflow: hidden;
margin: 1px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* Optional centered background */
background-position: center;
}
If this downside is not acceptable, you could also put hidden images on top of the backgrounds so that they will work like the user expects.
HTML for an example image with normal image mouse interactions:
<div class="_jjzlb" style="background-image: url('http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg');">
<img src="http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg" class="exPex">
</div>
CSS to hide the image on top:
.exPex {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity:0;
}
And here is a DEMO with the images, interacting with the user like you might expect them to.
EDIT: As pointed out by #GCyrillus, there are downsides to using a background image rather than keeping the images in the content of the page. These might include search engines and screen readers failing to recognize the image. I do not have an exhaustive list of the downsides but depending on your application it may be worth investigating.
you may use transform :
.exPex {
position: absolute;
left: 0;
top: 0;
min-width:100%;
margin: 0;
transform: scale(2);
transform-origin: 0 40px;
}
http://codepen.io/gc-nomade/pen/jrbPRy
if you define a dimension to the image the aspect ratio will also be included. The best way is to put your image inside a div and declare the size of images that way you will be able also to crop images.
Well it might seem obvious but you could just put a fixed width to it ? Try to change width: 100% with width: 400px on .exPex for example.
I can change only the background color like that (default color is white):
html, body {
height: 100%;
background-color: rgba(79,63,50, 0.85);
}
but cannot set an image, for example:
html, body {
height: 100%;
background: url(../img/main/background.jpg) no-repeat 50% 0;
background-size: cover;
}
Is it possible at all?
Plan B, could be to use an font-awesome's pre-loader symbol pre-loader, along with changed background color.
PS: The browser is Chrome. I'm using bootstrap with AngularJS. ng-cloak is used, also.
I don't know if this is possible and I already tried searching for a solution, however no luck at all.
I am trying a full page loading screen with an animated gif (loader-bar.gif), while the background is slightly transparent (or blurred). I guess this would be possible with jQuery, but I really do not understand how to achieve this?
I already tried several things myself, but always results in the same or similar problem; or the animated gif does not show animated while the page is loading and / or the the loader page is not covering the whole area, especially when extra content is shown (not even with height:100%; the only 'fix' for this is by using height:300%; but that is of course no solution).
So I decided to redo the full screen / window loader page, probably jQuery can get this job done correctly, right?
I would possibly solve it like this: try demo
The advantage is, that the content of the overlay is centered and you are not stuck to a background image. So you can place any content into the overlay, for example a text "stand by" plus an animated gif.
CSS
body, html {
margin: 0;
padding: 0;
}
div.overlay {
display: table;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div.overlay > div {
display: table-cell;
width: 100%;
height: 100%;
background: #ccc;
text-align: center;
vertical-align: middle;
}
HTML
<div class="overlay"><div>CENTERED ICON</div></div>
JavaScript
// on load finished
$(window).load(function() {
// select element and fade it out
$('.overlay').fadeOut();
});
Note that you should use $(window).load() as this fires, when everything is loaded completey, so images too.
Try something like this -> http://jsfiddle.net/3wU6C/5
try to define an element - or append it via js - as first node in the body, e.g.
<div id="load">Please wait</div>
with this style
html, body, #load { height: 100%; width: 100%; }
#load {
position : fixed;
z-index : 1; /* or higher if necessary */
top : 0;
left : 0;
overflow : hidden;
text-indent : 100%;
font-size : 0;
background : url(some-animated-loader.gif) center no-repeat;
}
then remove (or hide) that div when load or DomReady events occur