I'm trying to put some simple d3 into an iframe. I want the content of the iframe to scale with the size of the screen.
I'm trying to make this method work: http://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/.
The corresponding jsfiddle is here: http://jsfiddle.net/812y03ot/3/.
HTML
<div class="video-container">
<iframe src="http://mbostock.github.io/d3/talk/20111116/airports.html"
frameborder="no" scrolling="no"></iframe>
</div>
CSS
.video-container {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
The content of the iframe does not scale when I reduce the window size.
I do not want the content of the iframe itself to be respond to the reduced window size. I just want it to scale down when the window sized is reduced.
What am I missing here?
Try adapting this. http://jsfiddle.net/oxvkdcfy/
<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame {
-ms-zoom: 0.75;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
}
</style>
Related
I'm trying to make video container div responsive but couldn't manage it so far.
My current CSS for video and container:
.header-container{
width: 100% !important;
height: auto !important;
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;
widows: 100%;
width: 100% !important;
height: auto !important;
margin:0 auto;
}
HTML:
<div class="header-container">
<div class="video-container">
<video preload ="true" autoplay loop = "loop" volume = "0" style="width: 100%;
height: auto;">
<source src = "webd.mp4" type = "video/mp4" >
</video>
</div>
</div>
Current look:
Current look
Could you please tell me how can I fix it? I'm still new in HTML and CSS and I really need your help & advice.
https://jsfiddle.net/mlegg10/fsftz8rt
/* Flexible iFrame */
.flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="<source src = "webd.mp4" type = "video/mp4" >" frameborder="0" style="border:0"></iframe>
</div>
a large deal of your code does not associate itself between html and css so it would be helpful to you to understand how it works. Firstly, video is not styled due to it being referenced as .video in your css and your video container has the opposite with the reference being video-container with no dot so your css should look like this
.header-container {
width: 100% !important;
height: auto !important;
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;
widows: 100%;
width: 100% !important;
height: auto !important;
margin: 0 auto;
}
To make a view response you need to scale with its parent and to have most things with % to do this you need to add
position: relative;
to all the parents
After this you need to remove the position absolute as it will mess up your styling by making it an object that does not scale properly
Here is an example of what I think you mean:
https://jsfiddle.net/afut7y99/
Change the sliders at the sides to see how it resizes.
I am trying to centre an img within a containing div, where the img fills (minimum) 100% of the width and height of that containing div, meaning thta the image automatically scales to maintain image ratio. It is easy for me to align that img to the top, bottom, left or right, but I am hoping to centre the img both vertically and horizontally. I have been unable to locate the solution thus far, so any help greatly appreciated.
HTML
<section id="hero-image">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
</section>
CSS
#hero-image {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
background: red;
}
#hero-image img {
position: absolute;
min-height: 100%;
height: auto;
min-width: 100%;
width: auto;
margin: auto;
right: 0;
left: 0;
top: 0;
z-index: 0;
}
Fiddle
Use transform:translateX(-50) to manage this (but CSS3), large screen or small screen the image will always stay center and keep his ratio aspect.
Here the fiddle
Otherwise if you want something more cross browser you will probably need a bit of javascript, but I may be wrong.
Could you not set the hero image as a background? This will allow for more flexibilty both in terms of positioning and image size.
<section class="hero-image" style="background-image:url('https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg');">
</section>
.hero-image {
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
This achieves what you've set out to do exactly. There's other benefits to this method too, for instance, responsive images.
The CSS above sets the properties for any background image within a div class of hero-image. All you need to do then, is inline the background-image itself.
NOTE: If this doesn't have to be CMS driven, you can simply apply the image to the class rather than have it inline.
If you're happy with CSS3 (not supported in some older browsers) you could do this:
#hero-image img {
position: absolute;
min-height: 100%;
height: auto;
min-width: 100%;
width: auto;
margin: auto;
left: 50%;
top: 50%;
z-index: 0;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
#hero-image {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
background: red;
}
#hero-image img {
position: absolute;
min-height: 100%;
height: auto;
min-width: 100%;
width: auto;
margin: auto;
left: 50%;
top: 50%;
z-index: 0;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
<section id="hero-image">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
</section>
You can try this:
CSS
#hero-image {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
background: red;
}
#hero-image img {
position: absolute;
display:block;
height: auto;
margin: 0 auto;
top: 0;
z-index: 0;
min-height:100%;
width:100%;
left: -50%;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
HTML
<section id="hero-image">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
</section>
DEMO HERE
You could also just set it as a background with background-size: cover. Like this: https://jsfiddle.net/wzjzjsdp/2/
.img1, .img2 {
height: 400px;
width: 300px;
background-image:url(http://placehold.it/350x150);
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
display:inline-block;
}
.img2 {
width:500px;
height:400px;
}
<div class="img1"></div>
<div class="img2" style="background-image:url(http://placehold.it/350x250"></div>
EDIT: You can use inline style.
I am trying to create a div that is covers the browser window diagonally. See example here:
This is my CSS:
.shape {
height: 100%;
width: 150%;
transform: rotate(25deg);
}
This is my actual result:
I've tried a bunch of different things using transformOrigin and setting top and left of the div, but nothing seems to work to have this div centered diagonally across the browser.
You need to add these: transform-origin: center;
Also when width is more than 100% you need to move content its centered before rotate. Like Position: absolute; left: -25%;
body {
padding: 0px;
margin: 0px;
}
.frame {
width: 100vw;
height: 100vh;
background: #EFEFEF;
}
.rotated {
position: absolute;
left: -25%;
width: 150%;
height: 100%;
border: 2px solid blue;
transform: rotate(25deg);
transform-origin: center;
}
<div class='frame'>
<div class='rotated'></div>
</div>
I am trying to introduce a background video to a section of my site.
This section has a defined height of 530px.
However, the images seems too zoomed in.
HTML:
<section class="home-banner">
<video poster="" preload="auto" loop="loop" autoplay="">
<source type="video/webm" src="https://a0.muscache.com/airbnb/static/Seoul-P1-4.mp4"></source>
<source type="video/mp4" src="https://a0.muscache.com/airbnb/static/Seoul-P1-4.webm"></source>
</video>
</section>
CSS:
html {
min-height: 100%;
position: relative;
}
body {
margin: 0 0 150px;
}
body, h1, h2, h3, dt, dd {
margin: 0 auto;
padding: 0;
}
.home-banner {
display: block;
height: 530px;
overflow: hidden;
position: relative;
}
.home-banner video {
position: absolute;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 0;
}
I've copied this CSS from a tutorial.
Here's a plunker: http://plnkr.co/edit/Rw4Wr4gWUru9U07ZufLM?p=preview
Remove min-width: 100% and min-height: 100% and add max-width: 100%. Your code will look like this:
.home-banner video {
left: 50%;
max-width: 100%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 0;
}
Since .home-banner has a fixed width, you will see whitespace above and below the video on a narrow screen. I would suggest changing your .home-banner class to the following (so it will scale with the video):
.home-banner {
display: block;
height: auto;
overflow: hidden;
position: relative;
padding-bottom: 56.7%; /* you can change this to match the width/height proportion of the video */
background: red;
}
try this. set a max-width and max-height
.home-banner video {
max-height: 100%;
max-width: 100%;
}
i want to center an ovesized fullscreen video.
it works in webkit, but not in firefox.
demo: http://pascha.org/test/
the video-logo should always stay in the vertical/horizontal center, if you have wide browser resolutions > 1300px, like it does in chrome. in firefox though its only centered horizontally.
(for small resolutions it does not matter, i load a different video there.)
anyone knows the magic lines?
code for history purposes (same as in the demo):
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
#slider {
height: 100%;
margin: auto;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.id3 {
background-color: #253061;
z-index: 1;
}
.plane {
height: 100%;
position: absolute;
top: 0;
vertical-align: bottom;
width: 100%;
}
.videoslide {
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
}
.bgvid {
bottom: 0;
left: 0;
margin: auto;
min-height: 100%;
min-width: 100%;
position: absolute;
right: 0;
top: 0;
z-index: -100;
}
</style>
</head>
<body>
<div id="slider">
<div class="plane id3" rel="3">
<div class="videoslide">
<video autoplay="autoplay" loop class="bgvid">
<source type="video/mp4" src="startseite_5_1251.mp4"></source>
</video>
</div>
<div class="innerplane">
<div class="text" rel=4>
<div class="title">Wir produzieren aufregenden Video Content -</div>
<div class="title subtitle3 bmarg50">Zum Beispiel für den Ryder Cup.</div>
<a class="sliderlink link3" href="#">Projekt ansehen</a>
</div>
</div>
</div>
</div>
</body>
</html>
Try this:
.bgvid {
margin: auto;
min-height: 100%;
min-width: 100%;
position: absolute;
z-index: -100;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}