I use video.js in my application for display custom videos. It is working fine but the problem is related to its style, when video displays a black border on its left and right side appears. That means video is not displaying on its full window.
I have not seen your code, but it seems like the container for the video element is not an exact fit for your video.
Perhaps your container width-to-height ratio needs to match the video you are trying to display, otherwise if the borders only appear black on the left-right, then the video containers height is too small and should be larger.
Related
I'm attempting to make a webpage using fullpage.js, and have a very large background image. What I'd like to do is make it so that each time the user scrolls down, it also scrolls the background image down. Essentially, if the background image on section one starts at 0,0 and the screen is 750px tall, I'd like to make section two start at 0,750 on the background image.
Is there a way to do this that doesn't involve manually splitting the background image into a bunch of different images and assigning image one (from 0,0) to section one and image two (from 0,750) to section two, etc?
You can use the callbacks fullpage.js provides such as afterLoad or onLeave or even the class added to the body element with the form of "fp-viewing-1-2`.
Check out this video tutorial I created with a similar topic. Just apply the same principle.
I have been trying to implement a Image Gallery feature to my project using Blueimp (https://github.com/blueimp/Gallery/blob/master/README.md) but I am facing few problems with the thumbnails being showed in the gallery.
THE GALLERY
My problem:
If I add many images to the gallery, the thumbnails shown increases height of preview div vertically which I dont want.
My expectation: I want to give user the ability to scroll through thumbnails with the preview bar having a fixed height
Trials: I tried giving overflow:auto and max-height to the tag and got this result
WITH OVERFLOW AND MAX-HEIGHT
Problem with this: An ugly scrollbar appears at right of the preview div and moreover scroll happens vertically in this case not horizontally. Also, since I am making a responsive design, I wanted this to be compatible with mobiles too.
Since I will also be emabling Lazy Loading to my Gallery, it would be better if thumbnails and images shown beyond the viewport width load dynamically.
Is there any way I can implement this feature? Thanks in advance.
EDIT: I was able to partly implement the feature by using Jquery UI's draggable, setting width as auto, setting all lists to float left, using overflow as hidden and setting a max-height. Now, I am able to drag the preview div in left to view more thumbnails but the problem is if I use the next button, the thumbnail looses focus after last thumbnail visible in viewport (I have to drag to left to see the current thumbnail)
And I have still not figured about implementing Lazy Loading feature
I have this div block which shows a preview image to a video (YouTube), the problem is that this preview thumbnail generated by CMS, it doesn't give the YouTube play icon in the middle of it, so it doesn't look like a video, but just a plain image.
So I came up with a solution (top answer CSS show div background image on top of other contained elements), by adding an empty span and giving it a background, that YouTube play icon and position absolute and positioning it in the middle of that image preview thumbnail. All looks great, now the problem is that background is not a link, the thumbnail is a link to the video, so that transparent icon hides the thumbnail link below it.
According to this post:
Click through a div to underlying elements
It works, if you add the following CSS attribute:
pointer-events: none;
Here is also a post about the IE compatibility: fromanegg
I've got a client who has a library of images they want to use on a site as fullscreen backgrounds.
I'm using the slideshow functionality + api calls in Supersized js to act as the backgrounds for my slides/sub pages in a site navigation, this is playing nicely with my foreground elements to create a good multiple page effect.
The only issue is that some of their images don't work well centered, and should instead be top aligned (as the focal points of the images get cut off at larger window sizes if they're centered).
At the moment I'm doing a really nasty manual destroy and rebuild to make the adjustment when it's different (currently the images are managed in a CMS so the user just selects a box if the image is be vert aligned). This does the trick, but is clunky and has some nasty jumpiness.
Do you know of a way to do this without destroying/rebuilding OR is there a different plugin that could handle this (and still work with the pagination functionality I've described?)
Thanks guys!
You can try the jQuery.mb.bandGallery plugin. It has the advantage that, in fullscreen, it will resize and center the image to fit the screen.
Or you can try/get inspiration from some of the multiple articles and demos at tympanus.net/codrops, like:
Animated Content Menu
Fullscreen Image Blur
Responsive 3D Panel Layout
The client wants to have a simple slideshow with a little twist: he wants the menu to be on top of the image being changed.
what would be the way to achieve this using css and javascript?
Don't use a background image, just put the menu in a division and position it absolutely on the top of the image somewhere. You can't resize background images and if the images are bigger than the client's visible area they will be cut off.
As you normally do. The order of the image and menu is important. If the menu is after the image then you are ok. If you can't/won't change the order then you'll have to use the css z-index property.