i'm trying to code a television-like-youtube-video. But it seems bad in other resolutions.
Here's my fiddle: http://jsfiddle.net/QRkL9/3/
And here's my code:
HTML
<div id="wrap-video">
<img src="http://www.spotcularcarsisi.org/wp-content/uploads/2013/06/lg-tv.jpg" />
<div id="video">
<iframe src="//www.youtube.com/embed/W8vlVksDTe8" frameborder="0"></iframe>
</div>
</div>
And here's my CSS:
#wrap-video {
position: relative;
padding-bottom: 56.25%; /* 4:3 */
padding-top: 25px;
height: 0;
}
#wrap-video img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#video {
position: relative;
padding-bottom: 56.60%; /* 4:3 */
padding-top: 0;
height: 0;
}
#video iframe {
position: absolute;
top: 0;
left: 5%;
width: 90%;
height: 77%;
}
Thanks for any solution or help.
Related
I'm trying to have an image in the body of the page that's full width. Not a background. On the Center of this image id like a bar that blurs and darkens the background image. Then id like words on the bar.
Here is what i got:
#superimagecontainer {
position: relative;
height: auto;
}
#container4 {
position: absolute;
left: 0px;
width: 100%;
height: auto;
overflow: hidden;
z-index: 0;
}
#container4 img {
width: 100%;
position: relative;
z-index: 0;
}
#container4b {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 100px;
overflow: hidden;
z-index: 1;
}
#container4b img {
width: 100%;
position: relative;
filter: blur(3px) brightness(50%);
}
h8 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
opacity: 0.75;
}
<div id="superimagecontainer">
<div id="container4">
<img src="img/buildings750.jpg" alt="" />
</div>
<div id="container4b">
<img src="img/buildings750.jpg" alt="" />
<h8>THIS IS THE BEST TEXT SAMPLE EVER</h8>
</div>
</div>
I have an iframe with the following css:
.preview-iframe {
width: 100%;
height: 100%;
border: 0;
max-width: 1280px;
max-height: 720px;
margin: auto;
}
It lives inside a container with the following CSS:
.wrapper {
position: absolute;
width: calc(100% - 440px);
height: 0;
left: 0;
top: 0;
bottom: 0;
text-align: center;
background: #1c1c1c;
display: flex;
padding-bottom: 56.25%;
}
the wrapper lives inside a div with
position: fixed
I'm trying to maintain an aspect ratio of 16:9 for the iframe as the window resizes, but the above is not working. What should I do?
<div class="wrapper">
<iframe class="preview-iframe"> ... </iframe>
</div>
.wrapper {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.preview-iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
This is now possible with the new aspect-ratio CSS property:
.element {
width: 100px;
aspect-ratio: 2 / 1;
/* height will automatically be set to 50px */
}
More info here: https://css-tricks.com/almanac/properties/a/aspect-ratio/
It's available in all modern browsers.
On many places I found this code to make a video responsible, but it doesn't work for me.
<div id='wrapp'>
<iframe id='player' src="//www.youtube.com/embed/VWSL2SykovA?rel=0"></iframe>
</div>
css
#wrapp {
position: relative;
padding-bottom:75%; // video is 4:3 aspect ratio
padding-top: 25px;
height: 0;
width:70%;
margin:15px auto;
z-index:2;
border:medium ridge #b30000;
border-radius:9px;
}
#player{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
video, i.e. iframe is too tall.
Here is the FIDDLE
Your proportions seems to be faultives.
Try that css settings proposed by Zurb Foundation
#wrapp {
height: 0;
margin-bottom: 16px;
margin-left: 30px;
overflow: hidden;
padding-bottom: 67.5%;
padding-top: 25px;
position: relative;
}
#player {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
jsFiddled here
Here's a screen capture of nhZBV/4
If you apply box-sizing: border-box; it works fine!
Check out updated fiddle: http://jsfiddle.net/nhZBV/2/
This worked for me:
#wrapp {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
Example:
http://jsfiddle.net/nhZBV/3/
So I created a website that is designed to scale to mobile devices
http://follow.sueu.org.au/
It worked fine on my old android phone but doesn't work on more modern smartphones (both Iphone and Android) that use Google Chrome.
The problem is that on the home page the background image is half off the screen on mobile devices.
http://s23.postimg.org/4hozcopsb/photo.png
I'm fairly amateur at CSS and I'm sure there's something simple that I've done wrong, but I can't figure it out.
<html>
<head>
<title>The Story of Love</title>
<meta name="viewport" content="width=device-width;">
<style>
#wrap {
width: 500px;
margin: 0 auto;
}
body
{
background-image:url('Images/Title_BackgroundImage.jpg');
background-repeat:no-repeat;
background-position: top center;
background-size:500px;
background-color:#4e4943;
}
.introduction {
position: top center;
top: 0px;
left: 0px;
height: 227px;
width: 500px;
}
.introduction a {
display: block;
width: 100%;
height: 100%;
}
.love {
position: top center;
top: 227px;
left: 0px;
height: 90px;
width: 500px;
}
.love a {
display: block;
width: 100%;
height: 100%;
}
.gather {
position: top center;
top: 317px;
left: 0px;
height: 94px;
width: 500px;
}
.gather a {
display: block;
width: 100%;
height: 100%;
}
.relate {
position: top center;
top: 411px;
left: 0px;
height: 91px;
width: 500px;
}
.relate a {
display: block;
width: 100%;
height: 100%;
}
.witness {
position: top center;
top: 502px;
left: 0px;
height: 79px;
width: 500px;
}
.witness a {
display: block;
width: 100%;
height: 100%;
}
.love2 {
position: top center;
top: 581px;
left: 0px;
height: 125px;
width: 500px;
}
.love2 a {
display: block;
width: 100%;
height: 100%;
}
#media screen and (max-width: 480px)
{
#wrap {
width: 320px;
margin: 0 auto;
}
body
{
background-image:url('Images/Title_BackgroundImage_Mobile.jpg');
background-repeat:no-repeat;
background-position: top center;
background-size:320px;
}
.introduction {
position: top center;
top: 0px;
left: 0px;
height: 145px;
width: 320px;
}
.introduction a {
display: block;
width: 100%;
height: 100%;
}
.love {
position: top center;
top: 145px;
left: 0px;
height: 50px;
width: 320px;
}
.love a {
display: block;
width: 100%;
height: 100%;
}
.gather {
position: top center;
top: 203px;
left: 0px;
height: 60px;
width: 320px;
}
.gather a {
display: block;
width: 100%;
height: 100%;
}
.relate {
position: top center;
top: 264px;
left: 0px;
height: 61px;
width: 320px;
}
.relate a {
display: block;
width: 100%;
height: 100%;
}
.witness {
position: top center;
top: 323px;
left: 0px;
height: 51px;
width: 320px;
}
.witness a {
display: block;
width: 100%;
height: 100%;
}
.love2 {
position: top center;
top: 372px;
left: 0px;
height: 78px;
width: 320px;
}
.love2 a {
display: block;
width: 100%;
height: 100%;
}
}
</style>
</head>
<body>
<div id="wrap">
<div class="introduction">
<a href="Introduction/Introduction.html">
</a></div>
<div class="love">
<a href="Chapter1/Chapter1_Title.html">
</a></div>
<div class="gather">
<a href="Chapter2/Chapter2_Title.html">
</a></div>
<div class="relate">
<a href="Chapter3/Chapter3_Title.html">
</a></div>
<div class="witness">
<a href="Chapter4/Chapter4_Title.html">
</a></div>
<div class="love2">
<a href="Chapter5/Chapter5_Title.html">
</a></div>
</div>
</body>
</html>
#wrap {
width: 500px;
margin: 0 auto;
}
For example on iphone you will see it cutted almost on half cause it have 320px width.
you should add something like that:
#media screen and (max-width: 320px){
#wrap {
width: 320px!important;
}
}
I have the following HTML:
<body>
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</body>
And CSS:
.header {
position: absolute;
top: 0;
width: 100%;
height: 80px;
background-color: #f0f0f0;
}
.content {
margin: 30px;
background-color: #bcbcbc;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background-color: #f0f0f0;
}
Header and footer look as I wish but now I'd like the content to fill all the space between them (with 30px margin all around). What should I add to it?
Thanks for any help.
Try height 100% on the content div.
Try this
.header, .content, .footer {
position: absolute;
}
.header{
top: 0;
width: 100%;
height: 50px;
background-color: #99CC00;
left: 0;
right: 0;
}
.content {
top: 50px;
left: 0;
right: 0;
bottom: 50px;
background-color: #FF6600;
}
.footer {
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
background-color: #6600CC;
}