Remove Embedded Vimeo Video Border with Javascript - javascript

I've been trying to remove a border that is around an embedded Vimeo video on my site. I've tried removing the border with CSS and JS to no avail.
I'm wondering if there is a way to remove the border using Javascript.
The video can be seen here at the top of the page: http://feliciasantos.com/handforgedworks/

Felicia, I think the video content itself is uploaded to Vimeo with top and bottom black borders which makes it almost impossible to remove them with JS or CSS.
See the standalone player here: https://player.vimeo.com/video/292992048
(It can be done since it's a background video and the controls are not needed but it's not so easy, you'll have to find out the correct aspect ratio of only the video content without the black borders. So take the height of the video content and divide it by the width. That's the ratio. Next you'll have to wrap the iframe in a div which confirms to that ratio with a overflow: hidden where the iframe is positioned absolutely in the center of the div, e.g. http://jsfiddle.net/luwes/grybtsfm/)
However the best way to make it work is to crop the original video to remove the black borders and re-upload that to Vimeo.
Hope this helps.

Related

When i resize my webpage the section expands vertically adding unwanted background

When the webpage is on the big screen everything is perfect. All 3 blocks of text are inline and the white footer comes right after the background picture.
But when I resize the window webpage automatically adds space after the picture.
Not sure what I should do: have my picture repeated? But that won't look good. Leave it as it is? Not sure what to do? What is a good solution for this?
If you have a background image, you can set the background-size to cover to ensure that it always covers the whole element.
See example here: https://jsfiddle.net/ut04htu0/
If the background is an image(tag), through jquery set the height to window height in resize function.(jquery).
$(window).resize(function(){
$(".img").height($(window).height());
});
Here img is the class used for image tag.
Hopefully this solves your problem

punch through all DOM elements to display content underneath

I'm developing on a platform where all video content is displayed on it's own layer, and all DOM elements are drawn on top of it.
I have a full-screen background image which completely covers the video layer but I need to be able to punch a transparent window through this background so that the video layer underneath is visible. I have to do this on numerous screens so pre-cutting the hole into the background is the least desirable option.
I've tried drawing a div on top with various transparency, opacity etc. but nothing works.
Is this possible with html\css\javascript\a special image with transparency etc?

Vimeo default video size

I am trying to embed a number of different Vimeo players, which feature video content at different resolutions. I want the dimensions of each player be identical to that of it's respective video, so no letter boxing / black border appears around the edges. I'd have thought this would happen automatically, but every player I've embedded defaults to the same size, regardless of the dimensions of the video.
Does anybody know a way to either solve this simply, or pull the dimensions of the video itself so I could set the player's height dynamically?
I'm using the Iframe embed method.
Cheers
When working with different resolutions and browser sizes, best solution currently using JavaScript. Here's a jQuery plugin called FitVids that I would recommend.
How you would use it:
$(document).ready(function(){
// use div container that contains all your videos
$(document.body).fitVids();
});

Full width-of-screen background slider using CSS on a static website

I have a static website and I need to create a background slider with a fixed height of 587px. The width of each image is 2000px wide, but the user only needs to see the image to the width of his or her screen beyond 1000px, the width of the website. The image does not ever need to move, stretch, or respond in any way.
It needs to look and function like, www.adsphoenix.com/2013design/index5.php, but be a background slider. If you select "view background image" (Firefox), you will see the image is wider than most screens. It is aligned to the center and top.
The problem I have is finding a slider to allow the image to go outside of the 1000px website. For example, www.adsphoenix.com/2013design/. All of these images are 587 x 2000px.
Something similar to this would be, www.chattanoogafun.com. However, this slider stretches.
Do you know of a pre-built slider that would work? Or a slider I could change the alignment of? Or something I could do to my code to allow it to work? I have hosting with Blue Host.
You can add the image as background image of a slider div with CSS and use this code:
.slider_div { //or another selector
background: url(../path/to/image) center center no-repeat;
}
If you want to slide your background, you'll need inline CSS to set the background of the slider divs (or use jQuery for that).

Facebook gallery/lightbox - centred image while loading

Does Facebook in its gallery put image width and height in database?
Using JavaScript, they can not be sure about image width and height until image fully loads. But on FB, image is been loaded while its displaying and image is properly centered horizontally and vertically.
Facebook use display:inline-block for the image and text-align:center for parent div to center image in theater images.
Check out their blog post that explained how they did it. It's a nice CSS code but not all CSS. They use JS to set line-height of one of divs based on window.height.

Categories

Resources