I want to wrap a laptop image around a youtube video. I allready got a solution for that. Now i want to make everything responsive for smaller devices. Any solutions for that ?
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
#tv_container {
background: url('img/video.jpg') no-repeat top left transparent;
width: 1440px; /* Adjust TV image width */
height: 810px; /* Adjust TV image height */
position: relative;
}
#tv_container iframe {
position: absolute;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: relative;
top: 78px;
left: 252px;
width: 65%;
height: 67%;
}
<div class="container">
<div id="tv_container">
<div class="videoWrapper">
<iframe width="760" height="315" src="https://www.youtube.com/embed/qidS1nnK0Ps" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
You should change the #tv_container styles to use a variable width:
#tv_container {
background: url('img/video.jpg') no-repeat top left transparent;
width: 80%;
height: auto;
position: relative;
}
I also used an auto height for the container so it changes according to its width.
Related
I've been working on this all day but even with all my googling, I haven't figured it out.
Basically I would like to have the same effect as on www.tesla.com
The video is fullsize, but resizes according to the size of the window, and at the same time crops it a bit but keeps the video centered (try it out on Tesla website it's great). If it gets too small, it displays an image instead (for mobile).
I'm running the site on a jekyll theme with GitHub pages : https://alanlemoine.github.io/personal
My issues:
On my 13" screen, the video is too big and a vertical scroll bar
appears. I would like to have it fit the window, without scroll bars.
Even if it crops the video at the bottom (something with "overflow:
hidden" I think ?)
When resizing the window, the whole video is resized. I would like to
have it resized like www.tesla.com where it crops it but keeps
it centered.
I don't want the video to be completely fullscreen. I need the
navigation bar at the top. So in a DIV is better.
Can you help ?
Thank you so much in advance.
Here is what I have:
/* Default hide the video on all devices */
#video {
display: none
}
/* Default display the image to replace the video on all devices */
#videosubstitute {
display: block;
width: 100%;
height: auto;
max-width: 100%
}
/* Medium Devices, Desktops */
#media only screen and (min-width: 992px) {
#video {
display: block
}
#videosubstitute {
display: none
}
}
#videoDiv {
width: 100%;
height: 360px;
position: relative;
}
#videoBlock,
#videoMessage {
width: 100%;
height: 360px;
position: absolute;
top: 0;
left: 0;
}
#video {
width: 100%;
}
#videoMessage {
padding: 0.4em;
margin: 0;
}
#videoMessage {
color: white;
z-index: 99;
}
#videoMessage h1 {
font-size: 3em;
color: #ffffff;
text-align: center;
}
<div id="videoDiv">
<div id="videoBlock">
<div><img src="http://www.imi21.com/wp-content/uploads/2016/11/t12.jpg" id="videosubstitute" alt="" width="800"></div>
<video preload="preload" id="video" autoplay="autoplay" loop="loop">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"></source>
</video>
<div id="videoMessage">
<h1>Hello world</h1>
</div>
</div>
</div>
This is a relatively simple trick you can do with HTML 5 and some CSS.
First off you will need to absolutely position your video element, and hide its overflow. Then you will make it 100% the width and height of the page.
Next you will basically stretch the video to crop it based on the aspect ratio of the screen. There is a nifty thing called object-fit, which you can also just write as object-fit:cover which will give you the same effect, but it is not yet supported by IE so you will need both if you decide to use that.
I have included a codepen with a solution for you.
http://codepen.io/DrkDevil/pen/OpXxZV/
<nav>your navigation goes here.</nav>
<div class="flexCon" >
<div id="videoMessage">
<h1>Hello world</h1>
</div>
</div>
<div id="videoBg">
<video loop muted autoplay poster="img/videoframe.jpg">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
</div>
<style>
#videoBg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;}
#videoBg > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#media (min-aspect-ratio: 16/9) { #videoBg > video { height: 300%; top: -100%; }}
#media (max-aspect-ratio: 16/9) { #videoBg > video { width: 300%; left: -100%; }}
#supports (object-fit: cover) {#videoBg > video { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }}
/* Demo Classes */
nav { position:fixed; width:100%; top:0; left:0; padding:20px; background:#fff; z-index:2;}
/* Center content with flexbox container */
.flexCon { height: 100vh; display: flex; justify-content: center; align-items: center; }
/* Position the content relative to the flex container */
#videoMessage { z-index:1; position:relative; }
</style>
Here is a really good explination of how you can achieve what you are looking for in a more in-depth.
https://fvsch.com/code/video-background/
First of all, the video is kinda scaled and I'd love it to fit in the whole screen. Besides that, I can't figure out how to make video responsive on all screen sizes.
HTML
<div class="spread-video">
<video src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" autoplay="" loop="">
</video>
</div>
CSS
.spread-video {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
Does anybody know how to achieve this? Thank you in advance!
Target the <video> instead of the parent div, see fiddle: https://jsfiddle.net/m1pz6zcu/4/
.spread-video > video {
width: 100%;
}
Since the aspect ratio of the video is different from that of the view port, a work around for the issue is to make the video width bigger then the viewport width, center it and hide the overflow. See fiddle: https://jsfiddle.net/m1pz6zcu/6/
.spread-video > video {
width: 200%;
margin-left: -50%;
}
.spread-video{
overflow: hidden;
}
Add the following css
.spread-video video {
width:100%;
}
https://jsfiddle.net/mlegg10/fsftz8rt/4/
/* 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="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" frameborder="0" style="border:0"></iframe>
</div>
Try this
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
padding-top: 25px;
or this one
position: absolute;
width: 100%!important;
height: 100%!important;
I have two images of different width and height that need to be positioned bottom centered within the image box. Here is the HTML and CSS example.
<div class="box">
<div class='image'>
<img alt="" src="image.jpg"/>
</div>
</div>
.box {
max-width: 970px;
height: 440px;
}
.box img {
max-width: 100%;
position: absolute;
bottom: 8px;
margin-left: auto;
margin-right: auto;
}
This code works fine for a large image of exact width and height. But when a smaller image is placed within image box, that image is centered bottom right. How can I make both images center bottom?
Thanks for anyone's help!
Here you go... I'll try to explain as we go, but short answer, a fiddle
.box {
/* Just so I could see the parent */
background-color: #bada55;
max-width: 970px;
height: 440px;
/* Needed to make this element positional (so it will contain the absolutely positioned child */
position: relative;
/* Yep, center wasn't necessary here... */
}
.box .image { /* move this to the image wrapper */
position: absolute;
bottom: 8px;
/* Force full width */
left: 0;
right: 0;
/* Center contents (the image) */
text-align: center;
}
img {
max-width: 100%;
}
I found this semantic trick to work pretty well (without any absolute positions)
.box {
margin: 0;
text-align: center;
max-width: 970px;
height: 440px;
border:2px solid red;
}
.box .something-semantic {
display: table;
width: 100%;
height: 100%;
}
.box .something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: bottom;
}
html
<div class="box">
<div class="something-semantic">
<div class="something-else-semantic">
<img src="" width="50" height="40"/>
<img src="" width="120" height="70"/>
</div>
</div>
</div>
fiddle here.
I need to code the following block. The main block is responsive, and it has 2 other blocks inside, one of them has a static width, and other is dynamic (the img). How to make an image a fluid width, but the static height inside the main container?
the screenshot is here — http://joxi.ru/9xcvUtg5CbAxZuPPZH4
It needs 2 wrapper divs, but it seems to work:
http://jsfiddle.net/LSRPk/2/
The HTML:
<div class="bonsai-kitten">
any<br>content<br><br><br><br><br><br><br>height
<div class="rubberimage">
<div class="vertical-centerer">
<img src="kitten.jpg">
</div>
</div>
</div>
CSS:
.bonsai-kitten {
border: 3px solid red;
position: relative;
}
/* image area next to the sidebar */
.rubberimage {
position: absolute;
left: 200px; /* assuming fixed sidebar width */
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.rubberimage .vertical-centerer {
position: absolute;
left: 0; right: 0; /* means width: 100%; */
top: 50%;
line-height: 10000px; /* large enough? */
margin-top: -5000px;
vertical-align: middle;
}
.rubberimage img {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I have an iframe and a div inside a container. The two of them need to be vertically centered. After reading a few posts on tables to center, I gave it a try but to no avail. The iframe continues to stick to the top left border even though I have the iframe 'display' property set to 'table-cell' & 'vertical-align' to 'middle'.
The HTML code:
<!-- the container div -->
<div id="iframe_r_container">
<!-- iframe -->
<iframe id="iframing" src="mannequin.html" frameborder="0" ></iframe>
<!--div--> <div id="right_container">
<div id="user_credit">
<h1>Username</h1><br />
has <span id="credits">20,000</span> credits.
</div>
<div> <button id="template_button"><img src="images/Coutallure-WebApp/template_button.png" /><span>Templates</span></button> </div>
</div>
And here is the CSS:
/* START OF IFRAME_R_CONTAINER */
#iframe_r_container {
position: absolute;
display: table;
top: 48px;
bottom: 38px;
width: 960px;
}
/* START OF IFRAME */
#iframing {
display: table-cell;
width: 640px;
height: 480px;
vertical-align: middle;
}
/* END OF IFRAME */
/* START OF RIGHT CONTAINER */
#right_container {
display: table-cell;
vertical-align: middle;
width: 113px;
margin: 20px;
}
I have been stuck at this for half a day today so any help would be immensely appreciated.
If you don't mind using another technique than table-cell centering, you can try something like this :
#iframe_r_container {
position: absolute;
top: 48px;
bottom: 38px;
width: 960px;
}
/* START OF IFRAME */
#iframing {
position: relative;
top: 50%;
margin-top: -240px;
width: 640px;
height: 480px;
float: left;
}
/* END OF IFRAME */
/* START OF RIGHT CONTAINER */
#right_container {
position: relative;
top: 50%;
height: 113px;
margin-top: -57px;
margin-left: 670px;
width: 113px;
}
It works here on my FF/mac but you'd have to test it on other browser.
To center #right_container, you'd have to give it a heigh (here 113px) and set the negative margin-top accordingly.
Also, you may want to give a min-height: 640px to #iframe_r_container to avoid the iframe overflowing outside of its container.
I am not sure what are you trying to achieve, but just from reading your post - you cannot try centering element itself with some align property, this must be property of its parent element. You should try that margin, i think this is the right property to work with.
Adding "height" to your containers should do it. Just adding it to your iframe container worked for me in FF on my Mac.
#iframe_r_container {
position: absolute;
top: 48px;
bottom: 38px;
width: 960px;
height:480px;
}
(Note: Internet Explorer 8 (and higher) supports the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", and "inherit" only if a !DOCTYPE is specified.)
try these settings:
/* START OF IFRAME_R_CONTAINER */
#iframe_r_container {
position: absolute;
top: 48px;
bottom: 38px;
width: 960px;
}
/* START OF IFRAME */
#iframing {
width: 640px;
height: 480px;
margin: 0 auto;
}
/* END OF IFRAME */
/* START OF RIGHT CONTAINER */
#right_container {
vertical-align: middle;
width: 113px;
margin: 0 auto;
}
The attribute margin: 0 auto; will (hopefully) center your iframe and other div inside the container. Not tested but give it a try.