Hello fellow stackers.
I've got a slight problem. I'm trying to duplicated my webpage for another page, however whenever I try and remove the logo the video disappears. Not to sure why. I've input the code however I don't think its much use because it works find by itself, which leads me to believe that there is something within my code which relies on the logo being there. Your help is much obliged. The live example is here. If you inspect element on any browser and remove the logo you'll find that it disappears.
.Intro-Video {
position: relative;
z-index: 9999;
width: 100%;
display: block;
background-color: #fff;
overflow: hidden;
}
.Intro-Video1 {
position: relative;
z-index: 9999;
width: 100%;
display: block;
margin-top: 200px;
background-color: #fff;
overflow: hidden;
}
.video-box {
height: 100%;
width: 100%;
position: relative;
}
#video-container {
height:100%;
width:100%;
overflow: hidden;
}
video {
position:absolute;
z-index:0;
}
video.fillWidth {
width: 100%;
}
.Kadeem-Logo {
position: relative;
top: 0px;
width: 100%;
display:block;
}
.Kadeem-Logo img {
display: block;
width: auto;
max-width: 100%;
}
<div class="video-box">
<div id="video-container">
<video autoplay class="fillWidth">
<source src="http://client.hugoandmarie.com.s35719.gridserver.com/client/AlexandraPosen/Alex_Posen_Video.mp4" type="video/mp4" />
</video>
<div class="Kadeem-Logo">
<img src="http://www.kadeem.london/Content/Image/KL.png" alt="Kadeem Logo" title="Kadeem Logo">
</div>
</div>
</div>
</div>
Your logo image is providing all the height for the container.
Try this:
#video-container {
height: 550px; /* Or whatever height you want */
}
To fix the issue.
Related
I have a vertical video in an <a> parent, as well as a div under it which is an overlay. I want to set max width and height parameters for the parent in terms of vh, but either the video doesn't follow them, or the overlay doesn't. The overlay is an absolute element, but they should both be inheriting the dimensions. Some code variations gave me the overlay that has a constant width (of the original video), or a constant height, and in this variation the video isn't covered by the overlay and only gets smaller after a certain point of it is already covered by the window (so it doesn't minimize according to max-height).
I'm tired of redoing this combination for hours trying to get the right result, does anyone know how I can achieve this with relatively simple styling?
I didn't want to include my real video, but it's a 424x754 mp4 file.
.media-container {
display: inline-flex;
position: relative;
max-height: 85vh;
max-width: 95vh;
}
.media-container>video {
display: inline-block;
height: 100%;
width: 100%;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
opacity: .6;
background-color: red;
}
<a class="media-container" href="">
<video src="https://assets.mixkit.co/videos/preview/mixkit-waves-in-the-water-1164-large.mp4"></video>
<div class="overlay"></div>
</a>
EDIT:
Here's a css version that works closer to what I want, but it's still wrong because the video doesn't minimize when you decrease the window's width.
.media-container {
display: inline-flex;
position: relative;
max-height: 85vh;
max-width: 95vh;
}
.media-container>video {
display: inline-block;
height: auto;
width: auto;
max-width: 95vh;
max-height: 85vh;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
right:0;left:0;top:0;bottom:0;
opacity: .6;
background-color: red;
}
<a class="media-container" href="">
<video src="https://assets.mixkit.co/videos/preview/mixkit-waves-in-the-water-1164-large.mp4"></video>
<div class="overlay"></div>
</a>
Not sure if this is what you are after, but adding an explicit setting of width and height (in vh) to the anchor tag (.media-container) seems to make things better:
.media-container {
display: inline-flex;
position: relative;
max-height: 85vh;
max-width: 95vh;
/* added these two lines */
width: 95vh;
height: 85vh;
}
.media-container-vertical>video {
display: inline-block;
height: 100%;
width: 100%;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
opacity: .6;
background-color: #fff;
}
<a class="media-container" href="">
<video src="https://assets.mixkit.co/videos/preview/mixkit-waves-in-the-water-1164-large.mp4"></video>
<div class="overlay"></div>
</a>
I want to put the iframe inside a phone image. Phone image is .png and has a transparent background.
I don't know how to mask iframe and make it visible only inside the phone image.
.phone {
display: block;
position: relative;
right: 0;
bottom: 0;
float: right;
border: 1px solid red;
}
.phone > img {
width: 250px;
position: absolute;
}
.wrapper {
position: absolute;
top: 0;
}
<div class="phone">
<img src="https://i.ibb.co/y8HRgg4/phone-front.png">
<div id="wrapper">
<div class="phone view_2" id="phone_1">
<iframe src="https://onsen.io/samples/" id="frame_1"></iframe>
</div>
</div>
</div>
Here's a start. I've applied border radius to mask the iframe's corners, disabled pointer events on the image, and set scroll on the iframe's x-axis. Notice also that the image falls after the iframe in the document so it appears over the top of the iframe.
.wrapper {
display: inline-block;
position: relative;
width: 250px;
height: 600px;
overflow: hidden;
}
.wrapper > img, .wrapper > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper > iframe {
overflow-x: auto;
border-radius: 60px;
}
.wrapper > img {
pointer-events: none; /* stop click & scroll on the image */
}
<div class="phone">
<div class="wrapper">
<iframe src="https://onsen.io/samples/" id="frame_1"></iframe>
<img src="https://i.ibb.co/y8HRgg4/phone-front.png">
</div>
</div>
try this
<iframe src="https://i.ibb.co/y8HRgg4/phone-front.png" frameborder="0"></iframe>
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.
http://jsfiddle.net/KuFbH/
I am trying to get these 4 images to all be displayed in one line without breaking to the next line. For some reason I can't get it to work although if I zoom out on the page it appears exactly how I want it. What can I do?
I want to be able to scroll horizontally to view them.
HTML
<div id="main">
<div id="scroll">
<div class="Wrapper">
<div class="scrollArea">
<img src="">
<img src="">
<img src="">
<img src="">
</div>
</div>
</div>
</div>
CSS
*{
font-size:100%;
margin: 0px;
padding: 0px;
}
body{
width: 100%;
height: 100%;
}
#main{
position: absolute;
top:100px;
bottom:100px;
left:0;
width: 100%;
background: black;
}
#scroll{
position: relative;
width: 100%;
height: 100%;
}
div.Wrapper{
position: relative;
overflow: auto;
width: 100%;
height: 100%;
}
div.scrollArea{
position: relative;
width: auto;
height: 100%;
}
.scrollArea img{
max-width: 100%;
max-height: 100%;
}
Jquery
var totalWidth = 0;
$('.scrollArea img').each(function(){
totalWidth += parseInt($(this).width(), 10);
});
$('.scrollArea').css("width", totalWidth);
Your images wrap because that's the default behavior for inline elements. If you don't want them to wrap, specify the appropriate behavior on the parent element:
.scrollArea {
white-space: nowrap;
}
try this:
.Wrapper {white-space:nowrap;}
demo here:
http://jsfiddle.net/FEb9L/
Set your image to display: inline-block; in your css stylesheet.
I got a weird behaviour on IE8 for this
HTML:
<a class='main'>
<img src='http://annawrites.com/blog/wp-content/uploads/2011/04/color-explosion.jpg' />
<div class='layer'> </div>
</a>
CSS:
.main { display: block; position: relative; width: 100px; height: 100px; }
.main img { width: 100px; height: 100px; /*display: none;*/ }
.layer { position: absolute; top: 0px; left: 0px; width: 100%; height: 50%; cursor: crosshair; }
JSFiddle: http://jsfiddle.net/HLua8/2/ (or open this in IE8)
On IE8, .layer (ie. the crosshair cursor) is only on the top left corner (it minimizes itself to the content, which is 3 x )
I noticed it works fine when I set .main img to display:none but I need the image
Could someone help me to make .layer shown on IE8 as big as it is supposed to be? (ie. 100% width 50% height, just like on other browsers)
After much fiddling, the best solution I could come up with for you, is to create a blank/transparent image and use this as the background image for your layer.
add to your css:
.layer {background-image:url(blank.png);}
.layer:hover{cursor: crosshair;}
an updated version of your document would look as follows:
css:
#container {
margin:40px;
position: relative;
width: 100px;
height: 100px;
}
.main img {
max-width: 100%;
}
.layer {
position: absolute;
top: 0px;left: 0px;
width: 100%;height: 50%;
background-image:url(img/blank.png);
}
.layer:hover{cursor:crosshair;}
html:
<div id="container">
<a class='main' href="test.html"><img src='http://annawrites.com/blog/wp-content/uploads/2011/04/color-explosion.jpg' /></a>
<div class='layer'></div>
</div>