Tagged: 

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • May 15, 2017 at 2:33 pm #793333
    spiekutowski

    Hi guys,
    I have browsed through forum and did not find the answer to my specific question. I am trying to play a video in Color Section but I have encountered 2 problems.

    I have 2 form of the same video: Full screen 16:9 and Narrow 4:3 (video with black bars on top and bottom)

    1. If I play in 16:9 ratio full screen video, I need to make my color section 900 px height and even more to fit all the video – that is no good as there is cut images and text as a result of this not fitting the section if that is smaller.

    2. If I play 4:3 the video fits perfectly – this is what I want. But the problem is that there are BLACK BARS on the sides.

    THESE ARE NOT THE VIDEO BARS – as the video have not got any bars on the left and right.

    Big question is: Can I change the color of the black bars on each side of the video? – I want them to be white.

    Bars on each side of the video.

    This is the page:

    https://colwayinternational.online/cookies/

    Please help :(

    May 15, 2017 at 2:41 pm #793337
    Yigit

    Hey spiekutowski,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    #top .av-video-slide .avia-slide-wrap {
    background: #fff url(//colwayinternational.online/wp-content/themes/enfold/css/../images/layout/preload-dark-grey-big.gif) no-repeat center center;
}

    Best regards,
    Yigit

    May 15, 2017 at 2:54 pm #793347
    spiekutowski

    Thanks Man!
    This is awesome.

    Now what is left is to deal with video border.

    I don’t suppose that can be done with some gradient filter or autovector mask or smthng ?

    Otherwise I will have to cut video :/

    Video Borders

    May 15, 2017 at 2:57 pm #793349
    Yigit

    Hi,

    I tried a few custom CSS code to remove all borders and box shadows however that did not help. Can you please try with another video and check if borders are on the video or not? :)

    Best regards,
    Yigit

    May 15, 2017 at 3:02 pm #793351
    Guenni007

    and by the way you can shorten your url of background-image to :
    https://colwayinternational.online/wp-content/themes/enfold/images/layout/preload-dark-grey-big.gif

    • This reply was modified 6 years, 11 months ago by Guenni007.
    May 15, 2017 at 3:04 pm #793354
    Yigit

    Hi,


    @Guenni007     Thanks for your input :)

    Best regards,
    Yigit

    May 15, 2017 at 3:19 pm #793361
    Guenni007

    they are definitly on video – so cropping will be the fastest way – its only 50mb

    and maybe it is nice to have the border on bottom not visible:

    .page-id-3098 #after_section_1 {
    border-top: none;
}
    • This reply was modified 6 years, 11 months ago by Guenni007.
    May 15, 2017 at 3:33 pm #793369
    spiekutowski

    Just uploaded new film.

    Borders again :(

    https://colwayinternational.online/cookies/

    May 15, 2017 at 3:44 pm #793376
    Guenni007

    no : borders are definitly on the video – see here your example from thread before (after you have seen it i will erase it)
    https://webers-testseite.de/kokon/videobackground-on-slider/

    • This reply was modified 6 years, 11 months ago by Guenni007.
    May 15, 2017 at 4:00 pm #793389
    Guenni007

    what kind of video tool do you use?
    i just downloaded yours and croped it by a littel Program called Xilisoft Video Converter.

    May 15, 2017 at 4:26 pm #793407
    spiekutowski

    Just simple Movie Maker by windows. I will try your suggestion when I will get back to PC. Thanks!

    May 15, 2017 at 5:52 pm #793440
    Guenni007

    if you don’t get it – nice tool (on Mac too) i can transform it for you (or download it now on my test page)

    May 15, 2017 at 9:21 pm #793517
    Yigit

    Hi,

    Alright! We will keep the thread open and wait to hear from you :)

    Best regards,
    Yigit

    May 15, 2017 at 10:30 pm #793568
    spiekutowski

    You can close it. I sorted it. Thanks guys for help :)

    May 15, 2017 at 11:22 pm #793599
    spiekutowski

    Sorry dont close it. anyone knows how to make loader background white as well ?

    Loader backround

    https://colwayinternational.online

    Thanks!

    May 16, 2017 at 9:47 am #793775
    Guenni007

    the loading.gif in images is a bit too small. Go on google search link and upload your own one via ftp to your server

    The css you need is above because you set the white background with it: something like this f.e

    #top .av-video-slide .avia-slide-wrap {
    background: #fff url("/wp-content/uploads/loading.gif") no-repeat scroll center center;
}
    May 16, 2017 at 2:40 pm #793952
    Yigit

    Hi,

    Please refer to @Guenni007’s post above :)

    @Guenni007     Thanks as always :)

    Best regards,
    Yigit

    May 18, 2017 at 3:52 pm #795965
    spiekutowski

    Works like a charm.

    You guys are the best. Thank you :)

    May 18, 2017 at 9:41 pm #796177
    Yigit

    Hi,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Color Section – Video Playback – how to make white background/bars ?’ is closed to new replies.