I want to embed vimeo video into my web project.
I made a fiddle.
https://jsfiddle.net/p9cbs2u5/
You can see the white gap horizontally.
It's not cover 100% of parent.
Perhaps the reason is the video has proper aspect ratio.
How do I fill 100%? It's okay to video is cropped.
Your iframe has the correct size. The problem is the way vimeo displays the video inside the iframe. By default the background of the player is transparent hence the white gap you see horizontally. Adding the &transparent=0 parameter to your video url should give you your desired result.
Related
I'm running into a problem. When I view my website on a computer and phone, it's built perfectly; but, when I pull it up on an iPad, the background images are like blown up. My website is http://www.zwdalpha.com/, any help will be very appreciated! Also, my Github is https://github.com/zcsmouse970/zwdalpha
To address the issue, you first need to understand what is happening. Background image sizes are handled with the background-size attribute, which you currently have set to cover. cover is great for large screens because it makes sure the image "covers" the height of the element. This allows for clipping on the sides to make sure it fills from top to bottom. contain is the opposite of that. It makes sure you can see the entire image at all times. It does this by making sure the width is 100% and the height is left to clip or expand. When you see on tablets and smaller that the images are "blown up", the CSS is making sure that the entire content area is filled with the image, and it does this by making sure the height of the image fills the content pane. Here's where we get a little more detailed.
You have your images setup as fixed. Obviously this was the effect you were going for, but lets think about what needs to happen here. Now the image needs to be covering the screen from top to bottom because it is able to be viewed anywhere the content pane is while being fixed. So now your image is covering the entire viewport. You can see the changes it makes when you change it to background-attachment:scroll;. It instead fits the image into the content pane instead of the viewport.
All of that being said, the way you can change this is by implementing media queries and switching backgrounds to cropped versions that are more appropriate to the viewing dimensions.
Your issue appears to be to do with background-attachment: fixed not behaving as expected.
Try background-attachment: scroll
How would one include an image on a website that behaves like the twitter users banner image which when you scroll one pixel it scrolls the page 2 pixels, moves the top of the image up one pixel and covers one pixel from the bottom of the image?
I don't know what to call this so I don't know how to search for it.
It is like the image moves up while the content behind it also slowly covers up the image like an extra layer of paper pushed up.
It's a form of parallax scrolling. There are plenty of good tutorials on parallax that I'm sure will help you achieve the effect you desire.
http://1aproductions.ots-internet3.net
So my wordless theme has a built in slider. It is responsive. The slider is in the background and seems to have a height of 100%. On browsers that are normal width but tall this means that a lot of the image is hidden behind the white background of the content lower down the page. If you resize the page while the slider is on the slide image of the queen you will see why this is a problem. My boss would like it to always show her heard and shoulders.
Is there a way of, on longer shaped browser windows, stopping the image from being 100% height and therefore making it display better on longer height browsers as well as normal shaped ones?
As you can probably tell I'm kind of out of my depth on this one, so any help would be fantastic!
Thanks
Luckily for you there is a quick fix on this particular slider. The elements are set to have a background-attachment of fixed on #slider-container .full-bg-image. Clear it and the whole picture will display. You should then be able to use the background-position to align more specifically for mobile, or only have the fixed position for desktop use with a media query. I'm not sure what method the powers that be would like best :)
I have added a poster image to a video, which is exactly the same dimensions as the video container itself:
Video file information
Video poster file information
My HTML looks like this (deliberately no width and height specified as I want the video to resize with the browser rather than remain fixed):
<video controls
src="mov/MVI_1880.mp4"
poster="mov/MVI_1880_poster.JPG">
</video>
My CSS looks like this (width set to 100% to ensure the video uses the full width of the viewport, and resizes automatically when the browser is resized):
img, video{
width: 100%;
}
However, when viewing this in either Chrome or Safari in iOS7 (iPhone 5S and iPad Mini), the poster image has black bars to the left and right:
Tried to post a link to an image here but it says I need a reputation of at least 10, to post more than 2 links - you'll just have to find the image on my Flickr site (see first two hyperlinks)
If I specifically set a width and height for the video element, then this problem goes away:
<video controls width="320" height="180"
src="mov/MVI_1880.mp4"
poster="mov/MVI_1880_poster.JPG">
</video>
Tried to post a link to an image here but it says I need a reputation of at least 10, to post more than 2 links - you'll just have to find the image on my Flickr site (see first two hyperlinks)
but I want to avoid this, as the video then remains at a fixed size when resizing the viewport.
I have tried setting a height of auto in the css, but this made no change.
Also worth noting, that this works fine in Chrome on my desktop(i.e. I have no width or height specified in the HTML, and a width of 100% in the CSS), and the poster image correctly sizes to the full width of the viewport:
Tried to post a link to an image here but it says I need a reputation of at least 10, to post more than 2 links - you'll just have to find the image on my Flickr site (see first two hyperlinks)
Any help much appreciated.
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/