HTML video resize to always fit - javascript

I am looking for simple solution to always keep aspect ratio of a video but also to always fit the video inside the browser window for both the width and the height.
So far all the solutions I have found have been fitting only by width, but I need also to fit height. :}

Bootstrap does this. The trick is that CSS padding bottom is computed based on the width of the element.
.video-container {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 56.25%; /* calculate by aspect ratio (h / w * 100%) */
}
.video-container .video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container">
<video class="video"></video>
</div>
See this example. It works with <embed>, <object>, <iframe>, and <video> tags. My example is just a colored <div> that keeps its' aspect ratio constant.

I wrote this for images originally for another question on SO, but it should work for just about any element. Just change the first variable to match your video element. You can also drop the for loop if you are only resizing a single element.
JS:
function resize() {
var img = document.getElementsByTagName('img');
var w = window.innerWidth;
var h = window.innerHeight;
//console.log(w);
//console.log(h);
for (i = 0; i < img.length; i++) {
var ratio = (img[i].clientHeight / img[i].clientWidth);
if (img[i].clientHeight > h && img[i].clientWidth < w) {
img[i].style.height = h + "px";
img[i].style.width = (h / ratio) + "px";
}
if (img[i].clientHeight <= h && img[i].clientWidth < w && ratio > 1) {
img[i].style.height = h + "px";
img[i].style.width = (h / ratio) + "px";
}
if (img[i].clientWidth >= w) {
img[i].style.width = w + "px";
}
if (img[i].clientHeight < h && img[i].clientWidth <= w && ratio < 1) {
img[i].style.width = w + "px";
}
}
}
resize();
window.onresize = resize;
JSFiddle: https://jsfiddle.net/hopkins_matt/k7t26sw5/

You could try the CSS only route. YouTube had the solution I was looking for which was keeping width, and height in a 16:9 ratio.
video {
width: 100%;
min-height: 480px;
height: calc((9 / 16) * 100vw);
max-height: calc(100vh - 169px);
}
With HTML5, the aspect of the video will mold to the parent no matter the video's ratio.

Try with Javascript...
function updateHeight()
{
var videoHeight = 9 * videoDom.offsetWidth / 16;
videoDom.style.height = vidoeHeight + "px";
}
window.onload = function()
{
updateHeight();
}
window.onresize = function()
{
updateHeight();
}
Assuming your video has 16:9 aspect ratio.

Related

Does not resize image

here is my URL
https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c
This image height and width is 225 & 400
i need height and width 100
here is javascript function
var myUrl = 'https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c';
var img = new Image();
img.src = myUrl;
var width;
var height;
img.addEventListener("load", function(){
console.log( this.naturalWidth +' '+ this.naturalHeight )
var imagewidth=this.naturalWidth;
var imageheight=this.naturalHeight;
var maxht =100;
var maxwt = 100;
if (imageheight > maxht || imagewidth > maxwt)
{
var old_ratio = imageheight / imagewidth;
var min_ratio = maxht / maxwt;
// If it can scale perfectly.
if (old_ratio === min_ratio) {
// this.resize_image(img, maxht, maxwt);
console.log(old_ratio);
console.log(min_ratio);
img.height = maxht;
img.width = maxwt;
console.log("does not change height and width");
console.log(img.src);
}
else {
var newdim = [imageheight, imagewidth];
newdim[0] = maxht; // Sort out the height first
// ratio = ht / wt => wt = ht / ratio.
var old_ratio = imageheight / imagewidth;
newdim[1] = newdim[0] / old_ratio;
// Do we still have to sort out the width?
if (newdim[1] > maxwt) {
newdim[1] = maxwt;
newdim[0] = newdim[1] * old_ratio;
}
//this.resize_image(img, newdim[0], newdim[1]);
img.height = newdim[0];
img.width = newdim[1];
console.log("change heigth and width");
console.log(img.src);
}
}
// width=this.naturalWidth;
// height=this.naturalHeight;
});
But does not change the height and width.
Kindly advice me,
Thanks
You can do this using only css properties.Below is a code sample.
Hope it will be useful
img {
max-width: 100px;
max-height: 100px;
}
<div>
<img src="https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c">
<div>
You can just use CSS to resize your image, something like this:
img {
width: 100px;
height: 100px;
}
Always CSS first, if you couldn't solve it this way, then find a JavaScript way to solve it..
in JavaScript do it this way(as example), you can refine the code as suite you:
function resizeIMG(w, h){
var img = document.getElementsByTagName('img'), i=0;
while(img.length > i) {
img[i].style.width = w + 'px';
img[i].style.height = h + 'px';
i++;
}
}
and call it like this:
resizeIMG(100, 100);
function resizeIMG(w, h) {
var img = document.getElementsByTagName('img'),
i = 0;
while (img.length > i) {
img[i].style.width = w + 'px';
img[i].style.height = h + 'px';
i++;
}
}
resizeIMG(100, 100);
<div>
<img src="https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c">
<div>
You can do this by writing this simple structure and css without stretching the image
.box {
width: 100px;
height: 100px;
overflow: hidden;
display: inline-block;
}
img {
max-width: 100%;
height: auto;
}
<div class="box">
<img src="https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c" />
</div>
<div class="box">
<img src="https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c">
</div>
<div class="box">
<img src="https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c">
</div>
<div class="box">
<img src="https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494577677180.jpg?alt=media&token=7a0c1ff0-1bc7-4ea9-9176-072aacc4349c">
</div>

Javascript function not giving expected results for image

This code when run should resize the height and width that a image to fit the container.
This is the output from the code(from alerts):
2488: Images natural height
3264: Images natural width
450: The containers height
1063: The containers width
612: New height
844: New width
4: The number of times it was divided to get to output
**It should divide it 6 times to provide the outcome of:
New width: 544
New height: 414
**
I am almost certain that the problem is in the Java Script:
function resize(iid, eid) {
//Get the ID of the elements (ele being the container that the image is in and img being the image its self)
var img = document.getElementById('img');
var ele = document.getElementById('contaner');
//makes the var needed
var currentwidth = ele.clientWidth;
var currentheight = ele.clientHeight;
var naturalheight = img.naturalHeight;
var naturalwidth = img.naturalWidth;
var newheight = naturalheight;
var newwidth = naturalwidth;
var x = 0;
//runs a loop that should size the image
while (newheight > currentheight && newwidth > currentwidth){
x = x + 1;
newheight = naturalheight / x;
newwidth = naturalwidth / x;
}
newheight = Math.ceil(newheight);
newwidth = Math.ceil(newwidth);
//alerts out the answers
alert(naturalheight);
alert(naturalwidth);
alert(currentheight);
alert(currentwidth);
alert(newheight);
alert(newwidth);
alert(x);
}
#contaner {
height: 450px;
width: 90%;
margin: 5% auto;
position: relative;
}
#img {
height: 450px;
width: 90%;
}
<div id="contaner">
<img src = "..\..\Resorces\Images\SlideShow\img1.jpg" style="width:652px;height:489px;" id="img"/>
<div id="left_holder"><img onClick="slide(-1)" src="..\..\Resorces\Images\arrow_left.png" class="left"/></div>
<div id="right_holder"><img onClick="slide(+1)" src="..\..\Resorces\Images\arrow_right.png" class="right"/></div>
</div>
The problem is this line:
while (newheight > currentheight && newwidth > currentwidth)
It's stopping as soon as either width or height fits within the container, where as it seems like you want both to fit within the bounds of the container. Change to || and you'll get six iterations:
while (newheight > currentheight || newwidth > currentwidth)

y position issue for background images via css and javascript

I have implemented a parallax scrolling effect based on a tutorial I found. The effect works great. However, when I specify the background images, I am unable to control the y (vertical) axis. This is causing problems because I'm trying to set locations on multiple layered images.
Any thoughts on what's causing the problem?
Here is one external script:
$(document).ready(function(){
$('#nav').localScroll(800);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#mainimagewrapper').parallax("50%", 1.3);
$('#secondaryimagewrapper').parallax("50%", 0.5);
$('.image2').parallax("50%", -0.1);
$('#aboutwrapper').parallax("50%", 1.7);
$('.image4').parallax("50%", 1.5);
})
This is another external script:
(function( $ ){
var $window = $(window);
var windowHeight = $window.height();
$window.resize(function () {
windowHeight = $window.height();
});
$.fn.parallax = function(xpos, speedFactor, outerHeight) {
var $this = $(this);
var getHeight;
var firstTop;
var paddingTop = 0;
//get the starting position of each element to have parallax applied to it
$this.each(function(){
firstTop = $this.offset().top;
});
if (outerHeight) {
getHeight = function(jqo) {
return jqo.outerHeight(true);
};
} else {
getHeight = function(jqo) {
return jqo.height();
};
}
// setup defaults if arguments aren't specified
if (arguments.length < 1 || xpos === null) xpos = "50%";
if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
if (arguments.length < 3 || outerHeight === null) outerHeight = true;
// function to be called whenever the window is scrolled or resized
function update(){
var pos = $window.scrollTop();
$this.each(function(){
var $element = $(this);
var top = $element.offset().top;
var height = getHeight($element);
// Check if totally above or totally below viewport
if (top + height < pos || top > pos + windowHeight) {
return;
}
$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
});
}
$window.bind('scroll', update).resize(update);
update();
};
})(jQuery);
Here is the CSS for one section:
#aboutwrapper {
background-image: url(../images/polaroid.png);
background-position: 50% 0;
background-repeat: no-repeat;
background-attachment: fixed;
color: white;
height: 500px;
width: 100%;
margin: 0 auto;
padding: 0;
}
#aboutwrapper .image4 {
background: url(../images/polaroid2.png) 50% 0 no-repeat fixed;
height: 500px;
width: 100%;
margin: 0 auto;
padding: 0;
}
.image3{
margin: 0 auto;
min-width: 970px;
overflow: auto;
width: 970px;
}
Both of these are being called to achieve the parallax scrolling. I really just want to more specifically control the background image locations. I've tried messing with the CSS background position and I've messed with the first javascript snippet as well. No luck.
just a quick shot, have you tried actually placing the images, either in a div or just using the img src tag to actually move the element rather than manipulating the y axis of a background image?

Stretching a small image to the window

How do I fully stretch an image to a window via Fancybox? (Fancybox 2)
The fancybox stretches as big as the image size, but no further.
I noticed a number of CSS limits stuck in the fancybox css, like:
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
Taking the max-width/height out and setting let's say width/height to 200% does stretch the image, but the containing rectangle itself (ie: the fancybox) is the same size, and it is no longer centered.
I am using the inline method with eg: jQuery(".fancybox").fancybox()
The i-pretty-much-gives-up-except-for-some-cool-but-useless-stuff approach:
.fancybox({
afterLoad : function () {
function gcd (x, y) {while (y != 0) {var z = x % y; x = y; y = z;} return x}
var body = $(document.body)
if (this.width/this.height > 1) {
// Max size is document body width.
var body_width = body.width()
var current_multiplier = gcd (this.width, body_width)
if (current_multiplier == 1) current_multiplier = body_width
} else {
// Max size is document body height.
var body_height = body.height()
var current_multiplier = gcd (this.height, body_height)
if (current_multiplier == 1) current_multiplier = body_height
}
this.width = this.width * current_multiplier
this.height = this.height * current_multiplier
}
})

full height header picture

I am looking at this site here:
platetheslate
I found it from another users question on here but I have one of my own.
How do they make the header image FULL HEIGHT? I know you can get a full width/height with even CSS "cover" element but thats not what I am getting at.
How did they set it, so no matter what size your display/window it takes up the full screen (height wise), no matter what you always just see the photo UNTIL you scroll down.
Thanks in advance!
This should scale the width in proportion with the height.
#id {
position: relative;
height: 100%;
width: auto;
}
in the header's css class, do height: 100%
Note their Javascript is unminified here: http://www.platetheslate.com/wp-content/themes/twentyeleven/js/jquery.main.js
Here is the method that sets the height and width of the image:
//initHImage
function initHImage() {
var minWidth = 1100;
var holder = jQuery('#h-image');
var image = holder.find('img');
var win = jQuery(window);
var ratio = image.width() / image.height()
image.removeAttr('height width');
holder.css({
overflow: 'hidden',
position: 'relative'
});
function setSize() {
var winW = win.width();
var winH = win.height();
var W = Math.max(winW, minWidth);
var winRatio = W / winH;
holder.css({
width: W,
height: winH
});
if(winRatio > ratio) {
image.css({
width: W,
height: W / ratio,
marginTop: Math.min((W - W / ratio) / 2, 0),
marginLeft: 0
});
}
else {
image.css({
width: winH * ratio,
height: winH,
marginTop:0,
marginLeft: Math.min((W - winH * ratio) / 2, 0)
});
}
}
setSize();
win.bind('resize orientationchange', setSize);
}

Categories

Resources