Tagged: , ,

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • May 21, 2014 at 3:42 pm #268046
    blankonblank

    Hi –
    Working with the theme for the first time with a new project.

    The video background is nice, but how do I control the transparency or opacity of the video in the background or add a filter of some kind so the text overlay can stand out more. Am I missing something? See our site: http://quoted.wpengine.com/ (hosted on WPengine)

    In the second instance we use the video background and include the text “hello”. How can we make that stand out and be crisp?

    Thanks,
    David

    May 21, 2014 at 10:24 pm #268252
    Josue

    Hey!

    Try adding this code to the Quick CSS to change the opacity of the video background:

    .avia-slide-wrap .mejs-container {
    opacity: 0.4 !important;
}

    Cheers! 
    Josue

    May 21, 2014 at 10:37 pm #268264
    blankonblank

    that’s perfect. it works great for a full screen slider. now what about doing the same if a video is background of a color section, as it is at the bottom of my page?

    May 21, 2014 at 10:41 pm #268269
    Josue

    Hi!

    This will do it:

    .avia-slide-wrap .mejs-container, .av-section-with-video-bg .mejs-mediaelement {
    opacity: 0.4 !important;
}

    Cheers!
    Josue

    May 21, 2014 at 10:44 pm #268271
    blankonblank

    perfect. much appreciated. seems like a nice feature to add, too.

    btw: the video slide looping at the top of my page has some weird dot thingy rotating behind the text overlay. what is that?

    May 21, 2014 at 10:47 pm #268274
    Josue

    I don’t see it, can you post a screenshot?

    Cheers!
    Josue

    May 21, 2014 at 10:53 pm #268278
    blankonblank

    https://www.dropbox.com/s/leubjm8r7dyf3on/grab.jpg

    May 21, 2014 at 10:54 pm #268279
    Josue

    That seems to be the loading circle of the video, in which browser are you seeing this?

    Cheers!
    Josue

    May 21, 2014 at 10:55 pm #268280
    blankonblank

    chrome. just looking for the best way to use a looping video. 10 second clip tops. the video is uploading to my wrodpress site hosted by wpengine.

    May 21, 2014 at 10:58 pm #268283
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    #top .av-video-slide .avia-slide-wrap {
    background: #000 !important;
}

    Cheers! 
    Josue

    May 21, 2014 at 11:01 pm #268288
    blankonblank

    that did it. thank you.

    last video related question: i have embeded a youtube episode for vistors to play on this same page looks great on laptop. but when viewed on an iphone, the video does not run full width of window/brwoser. am i missing something? can this be done?

    May 21, 2014 at 11:05 pm #268293
    Josue

    Try installing this plugin:
    https://wordpress.org/plugins/fitvids-for-wordpress/

    Cheers!
    Josue

    May 21, 2014 at 11:06 pm #268294
    blankonblank

    great. will do. thank you for all the smart support.

    May 21, 2014 at 11:07 pm #268297
    Josue

    You are welcome, glad we could help :)

    Regards,
    Josue

    May 27, 2014 at 9:18 pm #270805
    blankonblank

    hi
    i have added text over a photo in the background of a color section. how do you add a background to the special heading that just is around the word and not across the image? and how do you make the background transparent but leave the text solid color? what i am working on is here:
    quoted.wpengine.com

    the photo is of cassette tape and the heading is: “our inaugural series”

    also i can not figure out how to use the custom css class here. this is the name i added for this custom class: blank-photo

    May 27, 2014 at 9:22 pm #270809
    Josue

    Hey!

    Can you post a screenshot/mockup of what would you want to achieve?

    Best regards,
    Josue

    May 27, 2014 at 9:28 pm #270815
    blankonblank
    This reply has been marked as private.
    May 27, 2014 at 10:22 pm #270839
    Josue

    Hey!

    Try adding this to the Quick CSS:

    .blank-photo h1 {
    background: rgba(0,0,0,0.7);
    display: inline-block;
    padding: 20px !important;
    color: white !important;
}

    Result:

    Cheers!
    Josue

    May 27, 2014 at 10:34 pm #270846
    blankonblank

    perfect. many thanks.

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Text overlay and Video Background’ is closed to new replies.