I'm having an issue with the size of my border being incorrect before the content of the border (a video) is loaded. I have a list of elements and each element can be clicked - this will load a new video (animation) for each different element. Because there can be a short loading time for the videos, sometimes they take 1-2 seconds to appear. During this time, the border size is way off and overlaps my other elements. As soon as the video loads, the border 'snaps' to the correct size.
How do I keep my border from doing this?
Here's the HTML:
<div id="video"><video id="animation" autoplay="" loop="" muted=""><source src="videos/xxxxxxx.mp4" type="video/mp4"></video></div>
Here's my CSS:
#animation{
border: 5px solid #c00;
height: 100%;
}
#video{
height: 50%;
}
And here's a photo of the issue (I've painted over the text of the website). Note the way too large and overlapping border before the video loads.
Please let me know if there's any extra info or code I can provide.
What you should do is set the width of the video to something fixed.
#video{ width:300px;}
#video video{width:100%;}
Related
I have simply included a video:
<video preload muted autoplay loop id="sty">
<source src="content/1/sty.mp4" type="video/mp4">
</video>
I want this video to be full-width therefore I gave the css-properties weight 100% and height 100% to it:
* {
overflow: hidden;
}
video {
height: 100%;
width: 100%;
}
Overflow so that now scrolling is allowed. I simply want to show the video (without scrolling allowed therefore I use overflow hidden). Now I want to add some buttons (and these are [svg] images) as overlay to the video (to like the video, to share the video and to get more informations about the video). The buttons should be at the bottom-left side of the video like the buttons of TikTok:
But so far I can't get it working neither as overlay nor responsive.
Anyone has a working snippet where three buttons are placed over an video (like in the screenshot) on the left side?
Best regards
You can use object-fit property to fit the video without overflows:
video {
height: 100%;
width: 100%;
object-fit: cover;
}
I have a website that I am making for a friend, and on the mobile homepage, the footer is perfectly aligned. However, when you go over to either the pics or vids page, the footer is moved over to the left side. The css file can be found here. I have no idea why this is happening, and any help to understand why this is happening, and how to fix it would be great.
Just a quick note, to access the mobile version on desktop, use chrome, open up dev tools, and click on the phone icon in the top left of the dev tools pane. Set the width to 617, and the height to 1002.
Thanks!
Your content is overflowing from the pf-content class, making the page larger than 100% width that the footer is filling.
There are a range of ways to solve this:
Add overflow hidden to pf-content (Will look nasty on small screens)
Set a min width on the whole page body{ min-width: 1200px; }
Make the videos reactive, e.g. display inline blocks which will then wrap to a new line if the page is to small. (Could also be done with media queries used to scale the videos)
I would suggest making the page more responsive, and getting the videos to flow onto new lines if the page is too small to contain multiple. As a general rule tables aren't a great way to structure anything (other than an actual data table) you'd be much better off with a more flexible element. Though this will be more work on your part.
The width of the two iframes for video are set to 520px each which exceed the resolution you were testing on.
The iframes were placed in a table, with a fixed number of columns, causing an issue of overflow.
You can place the iframes in div instead, then change the way they are displayed in css. i.e. you can do a 2 column-like structure in the desktop.css if preferred and a responsive one in the mobile.css
<div class="video-container">
<iframe src="https://player.vimeo.com/video/146191500?title=0&portrait=0" width="520" height="293" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<div class="video-container">
<iframe src="https://player.vimeo.com/video/141281580?title=0&portrait=0" width="520" height="293" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
Not sure why I can't get this to work. I'm certain I've used this method before but can't find anything on it and can't get the issue resolved. I have a container div that contains a video. The height and width of the video will always adher to the 16:9 ratio of the original video. The video is fixed as I will be adding more content to the container (.featured) div that will overlay over the video. I need the height of the container to equal the height of the video in order to solve my problem (not to mention help out with responsive issues i will run into). My code is as follows:
<div class="featured">
<video loop id="featured-content" class="featured-video" poster="/sites/all/themes/merge/img/poster-frame.jpg">
<source src="/sites/all/themes/merge/img/Atlanta-Test.mp4" type="video/mp4" >
</video>
<div class="main-wrap">
<h1>Learn</h1>
</div>
</div><!--end featured-->
And my sass:
.featured{width: 100%; height: auto;
#featured-content{width: 100%; height: auto;position: absolute;}
}
Problem is the content from the rest of my site is coming up over the top of the video. Need the container div to match the height the video's auto height but can't get it to work for some reason. Any help is much appreciated!
You should be able to drop the height specification, and try adjust display type to inline-block:
.featured {
width: 100%;
display:inline-block;
}
Fiddle (added red border for clarity)
You need to float the video.
#featured-content {
float: left;
}
http://codepen.io/PanosAngel/pen/jqabxJ
I am using Jquery Lazy Load plugin to load images lazily when they come in the viewport of browser.
In place of the original image, I just place an animated loader gif. However because there is a difference in the dimensions of the animated loader gif & original image I see the original image shrinked in size.
I want to make the loader gif hold the entire space that would have been used by original image to be placed. (loader gif is 32*32 px & original img is 800*400px)
So I want that the image rendered by the code below should always occupy 800*400px space without the loader image scaling up to that size. I think that is possible through CSS, but I dont know how? Could you please guide me on this ?
<img class='lazy' data-original='/module_files/l.jpg' src='/loader.gif'/>
http://jsfiddle.net/uNbMN/1/
There are a lot of ways to solve this, but just using a single img tag and no js I don't think there is a very good way. You can't tell an img to center inside itself, because you are setting the actual dimensions. You could do something like this with two classes.
img.lazy {
height: 400px;
width: 800px;
border: 1px solid black;
}
img.loader {
height: auto;
width: auto;
/*You would have to account for loader dimensions here*/
padding: 200px 400px 200px 400px;
}
If you really want to do this I would consider separating 'loader' from the image completely and placing it in its own, separate element.
I have a problem on making an iframe appear below absolutely positioned containers. This problem seems to be only on Google Chrome, while in IE 9, Firefox and Safari it's fine.
Code sample
<div id="cont_1" class="containers">
mixed content with images and text.
</div>
<div id="cont_2" class="containers">
mixed content with images and text.
</div>
<div id="cont_3" class="containers">
This one holds an iframe - An youtube video.
<iframe width="450" height="259" sr c="http://www.youtube.com/embed/VuNIsY6JdUw" frameborder="0" allowfullscreen></iframe>
</div>
<div id="cont_4" class="containers">
mixed content with images and text.
</div>
All these containers (slides) share similar CSS generated with JS.
#containers {
height: 398px;
width: 456px;
overflow-x: hidden;
overflow-y: hidden;
padding: 0px;
margin: 0px;
position: absolute;
left: 184px; /* Successive ones have greater value. */
zIndex : 150; /* Every successive div has zIndex higher than the previous one. */
}
Every successive div has a zIndex greater than the previous one. So 150, 152, 154, 156.
The fourth container is set to always appear higher than the other elements. It does, but not when a youtube video is inserted to the third one. The video always stays above all the elements including the fourth one, which is supposed to be at the top.
I tried the following css for iFrame, both through stylesheet and JS.
.containers iframe {
position : relative;
z-index : -100;
}
But this does not help with Chrome 14, though it works on all other current browsers including Safari .
In case anyone want to know whats this is used for, it is sort of like stacks, which allows to view the slides with animation. Clicking next sends the top most item back, while its edges are still visible.
Any thoughts?
I think what you are looking for is a parameter on the end of your iframe source. Try using http://www.youtube.com/embed/VuNIsY6JdUw?wmode=opaque
Also, your CSS is using the id selector (#) instead of the class selector (.)