Responsive iframe, set height, dynamic width - javascript

Need help on making an iframe responsive, keeping the height intact, but cutting width up to the center of a video when changing width of screen, instead of keeping the full width video.
<style>
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 45.98%;
}
.responsive-iframe {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
Right now i have this style code, where if I resize the browser window, it resize the entire video's height. But I need to keep the height, and cutting the video's width.
In the photo below, I Show an example of how I would like it. Same Height, but cutting the video's width responsively.
https://i.stack.imgur.com/uTmXH.png

Related

I have a video background on my bootstrap page - how can I make it "fixed"?

I have the following code http://jsfiddle.net/Leytgm3L/22/ and as you can see here on first "section" I have the video background. Now, when user scrolls the webpage down, so far the whole video goes up. I would like to achieve the effect that the webpage overlaps it, so the video and its section is fixed to the page. I have the following CSS code:
.video-container2 {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
.video-container2 video {
position: absolute;
z-index: -1;
width: 100%;
}
and I tried to add:
position: fixed
instead of absolute, but it didn't do the trick...
How can I do that?
position: fixed will do the trick, but you need to set the top/left/bottom/right with 0 instead of 0%:
.video-container2 {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
With bottom and right set, you don't need height and width anymore.
jsfiddle: http://jsfiddle.net/Leytgm3L/23/
In the comments, we talked about centering the video, even with oversize, and having it fill the viewport no matter the size of the screen. The only way to properly achieve that was with JavaScript. Using jQuery:
$(document).ready(function() {
setVideoSize();
});
$(window).resize(function() {
setVideoSize();
});
function setVideoSize() {
// ratio of video in pixels, width/height
var videoRatio = 320 / 176;
// ratio of window in pixels, width/height
var screenRatio = $(window).width() / $(window).height();
if (videoRatio < screenRatio) {
$('.video-container2 video').width($(window).width());
$('.video-container2 video').height('auto');
} else {
$('.video-container2 video').height($(window).height());
$('.video-container2 video').width('auto');
}
}
And to center it, we can use this sort of hacky CSS:
.video-container2 video {
position: absolute;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
}
jsfiddle: http://jsfiddle.net/Leytgm3L/28/
Change your top/left values to 0 instead of 0%.
.video-container2{
position: fixed;
top: 0;
left: 0;
http://jsfiddle.net/Leytgm3L/25/

HTML CSS JS onload change image size bad scale

I need scale image smooth, variable is image height, width is auto scaling by height size with css width: auto
css and HTML:
footer {
position: fixed;
bottom: 0;
height: 100%; /* if i change size here example: 300px get good scale */
margin-top: 15px;
}
footer img[usemap] {
border: none;
width: auto;
max-height: 100%;
height: 100%;
}
<footer>
<img src='https://burritojustice.files.wordpress.com/2011/02/img_3769.jpg' usemap="#Map" name="#Map" id="map">
</footer>
javascript:
$('footer').css('height', '300px'); //if i change size here get bad scale
/* at the result i need write with javascript how much height it's my image and get nice scale */
If i change css line: height: 100% to height: 300px it's works good width change together height by scale, but if i try to change value with javascript like this: $('footer').css('height', '300px'); it's works bad, also get 300px height but width remains the same not scaling.
https://jsfiddle.net/bddgo26o/1/
Check the v3 of the fiddle:
https://jsfiddle.net/bddgo26o/3/
Is that what you need?
footer {
position: fixed;
bottom: 0;
height: 20%; /* if i change size here example: 300px get good scale */
width:100%;
margin-top: 15px;
overflow: hidden;
border: 1px solid black;
}
footer img[usemap] {
border: none;
max-height: 100%;
min-height:100%;
}
$('footer').css('height', '50%'); //now changing gets ok
If I understand correctly, you wand to resize the height of the footer, and get the image resizing with the same proportions ?
If this is what you need, I have a solution in this JSFiddle
Basically, You are resizing the footer, so the image is resizing it height. But the original image size never change, so does the width.
I added this code to change the image height (to make it the same as the footer) :
$('footer img[usemap]').height($("footer").height());

Display image at 100% width or as big as fits in browser

How would I display an image so that its width is the original image width or 100% of the browser width, whichever is smaller (I want to show as much of the image as possible without horizontal scrolling).
Is this possible with CSS, or do I need to play around with javascript?
Try this: jsFiddle.net Demo
html:
<img src="http://gypsypixiepirate.com/wp-content/uploads/2013/03/Rumpus-party.jpg" class="className" />
css:
.className {
max-width: 100%;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
overflow: auto;
position: fixed;
}

Surround a responsive image with divs

I have an image that I want to center in the middle of a div, the div can grow and shrink according to the size of the window, the image can also differ in size and should never be larger than the surrounding div.
I have managed to do this by using the following HTML:
<div class="imgspace">
<img src="/variable.jpeg">
</div>
CSS:
.imgspace {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.imgspace img {
position: absolute;
margin: auto;
max-width: 100%;
max-height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Now I want to implement a simple set of controls for the image. They should be layed out in three divs surrounding the image on the left, bottom and right side. The divs should grow and shrink with the image as it changes, both considering viewport size changes as well as actual image size.
Is this possible to achieve using only CSS or do I have to involve javascript?
Here's the starting point jsfiddle. I have intentionally left out the three surrounding divs since the placement in the DOM does not matter for me.
I think you need to reserve some space for left, right and bottom elements.
In my example, I am reserving 10% for the #left and #right elements, leaving the img with a width 80%. Also, reserved 10% height for the #bottom element.
Hopefully this is what you are looking for: http://jsfiddle.net/6q4Ls/2/
Drag the separators to see how the elements react.
Another solution using elements outside your container, that seems simpler:
http://jsfiddle.net/6q4Ls/5/
Edit
Using fixed size http://jsfiddle.net/6q4Ls/9/
This might not work in all browsers, as I am using the calc() function.
div.imgspace img {
position: absolute;
margin: auto;
max-width: calc(100% - 200px);
max-height: calc(100% - 100px);
top: 0; right: 100px; bottom: 100px; left: 100px;
}

Centered div with a transparent background with jQuery

How to center a div across all browsers and behind this div there should be a transparent background layer covering entire screen of browser like lightbox.
If you give the div a fixed width, it's easy to use negative margins:
div {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-top: -200px;
margin-left: -300px;
z-index: 20;
}
Without a fixed height, you cannot center the div vertically without JavaScript. With a dynamic height, you can vertically center the div using a snippet like this (in jQuery):
$(function() {
var mydiv = $('div');
mydiv.css({
top: $(window).scrollTop() + $(window).height() / 2 - mydiv.height() / 2
});
});
As for the transparent overlay, just give it an absolute position and a full width and height:
div#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 10;
}
If you can ditch IE6 support, you can simply use position: fixed instead of absolute, that way the divs will be centered even if the user scrolls the page, and even when JavaScript is turned off.

Categories