-
Posts
-
I added a vimeo video to a color section background. Is it possible to control the vertical alignment of the video? I would like the video top aligned, not center.
Also, the video is wider than the browser window. Is it possible to have the width fit the browser window?
Hi,
Could you post a link to the page in question and how you would like to change the layout please?
Thanks,
RikardHere is a sample page I just made
The video is a background for a color section with page height set to 100%. The video is vertically centered so the top and bottom are both cut. I want the top of the video to be visible (top aligned).
Also, and it is not so important in this case, but the video is much wider than the page. Is there a way to control that?
If a photo is used as a color section background, there are some options to control the size, repeating etc. There are no options for video backgrounds. So can video backgrounds be controlled using CSS?
Hi!
I am redirected to following page. If your page is private, can you please create a temporary admin login and post it here privately so we can look into it?
Cheers!
YigitHey!
Please edit your color section element and give it a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png and then add following code to Quick CSS in Enfold theme options under General Styling tab and adjust the value as needed
#your-unique-id .av-section-video-bg iframe { top: 20%; }Cheers!
YigitHi,
I just tried your suggestion (using ID = background-video). It has no effect. I changed the % from 0-100 and in between and no change.
Hi!
Can you please try adding !important rule as following
#your-unique-id .av-section-video-bg iframe { top: 20% !important; }Regards,
YigitOkay… that affects the height, but it only works for a specific browser width. Change the width of the window or preview in tablet size etc and it does not work right (black space at top).
Also, on one of the Enfold Demo projects (business flat demo) there is a page with a background video. It appears that the video is fitting to the window width (except on phones). On my test page, the video is wider than the window so it is cropped (left and right).
Hi,
please refrain from bumping into your own thread, otherwise we can’t provide you a faster reply.
I checked page in question, but can’t see any issues with your background video, as it is resizing fine on different browser screens.
Add a left value to Yigit’s code and adjust the values until it fits your needs.
Best regards,
AndyI want the background video to vertically align to the top of the container. As is, it vertical aligns center so the top of the video is cut off.
Yigit’s code manually moves the video, but that is still in relation to being vertically aligned to center so that changing the browser window size changes how it aligns and creates blank space at the top.
Hi,
sorry, but I can’t see what you’re talking about. Please provide us screenshots of the issue, so we can clearly see what’s going on.
Best regards,
AndyI want to control the positioning of the background video.
When I put an image as a background, there are positioning options:
top-left, top-center, top-right
center-left, center-center, center-right
bottom-left, bottom-center, bottom-rightWhen I put the background video, there are no options. It defaults to center-center and the top of the video is cropped off. I want to be able to control the vertical positioning of the video. In this case, I want top-left
How do I do that?
Hi,
you can’t compare it to a background image, cause it’s not an image. However, you can use this code to control it’s position:
#top #background-video .av-section-video-bg iframe, #top #background-video .av-section-video-bg embed, #top #background-video .av-section-video-bg object, #top #background-video .av-section-video-bg video { left: -117px; top: 25px; }Adjust as needed.
Best regards,
AndySo what I gather from your reply, is that it is not possible to align a video to top. Is that correct?
Your suggested solution is basically the same as the previous suggestion above. It does not align to top, but adjusts up and down based on a center align (vertically speaking). The problem with that is it displays differently on different devices and for example on phones there is blank space above the video.
Thanks for your assistance.
Hi,
adjust top value in my code as needed, to align it to the top. If you need a different result for smaller screen sizes only, then add media queries, for example:
@media only screen and (max-width: 767px) { #top #background-video .av-section-video-bg iframe, #top #background-video .av-section-video-bg embed, #top #background-video .av-section-video-bg object, #top #background-video .av-section-video-bg video { left: -117px; top: 25px; }}For more information about media queries: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/#phone-queries
Best regards,
Andy
- You must be logged in to reply to this topic.