Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 16, 2016 at 5:24 am #687203
    raylay

    I need an update to this original post – https://kriesi.at/support/topic/video-lightbox-size/#post-686693

    You can do that with a quick css modification. Please add this in the Quick CSS field:

    .mfp-iframe-holder .mfp-content {
    max-width: 1280px;
    height: 720px;
}

    I need the CSS to be applied only to some videos NOT SITEWIDE, because some are smaller and being incorrectly enlarged now. How can I do this? Can I use a custom ID?

    Thank you for your help!

    • This topic was modified 8 years, 2 months ago by raylay.
    September 16, 2016 at 6:41 am #687247
    Vinay

    Hey Rachel,

    To target individual elements please enable custom css class name by following the steps provided here http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and add the css to Quick CSS along with the custom css class name.

    If you have any issue please get back to us after you add a custom css class name to the video element.

    Best regards,
    Vinay

    • This reply was modified 8 years, 2 months ago by Vinay.
    September 17, 2016 at 7:57 pm #688000
    raylay

    Thanks Vinay,
    I followed the instructions you listed and this did not work for me. I added the CSS class video1280 to the Icon Box element containing the link to the lightbox video and added: 

    #top .video1280 .mfp-iframe-holder .mfp-content {
    max-width: 1280px;
    height: 720px;
}

    See here – http://chrisgallop.com/blog/portfolio-item/kitchen-upgrade/
    Now no video files are opening as 1280px x 720px. It seems like it doesn’t apply the class to the lightbox link. What am I doing wrong here? Thanks!

    • This reply was modified 8 years, 2 months ago by raylay.
    September 20, 2016 at 8:57 pm #689521
    Vinay

    Hi,

    Sorry for the late reply. Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Vinay

    September 21, 2016 at 7:35 am #689646
    raylay

    Info included as requested in private content. I changed the CSS back to .mfp-iframe-holder .mfp-content {max-width: 1280px;height: 720px;} until we can getting it working correctly. Please feel free to update code and deactivate plugins as needed.

    September 23, 2016 at 3:27 pm #690827
    Vinay

    Hi,

    Thank you for the credentials. The custom class video1280 added to the icon will not affect the lightbox because the icon element is not a parent of lightbox. Please use the post ID or the page ID classname available in the body tag when you inspect the page to target individual pages.

    Please not this will affect all the lightbox video in the individual pages. Unfortunately there is no easy way to target individual lightbox videos.

    .postid-262 .mfp-iframe-holder .mfp-content {
    max-width: 1280px;
    height: 720px;
}

    Best regards,
    Vinay

    September 23, 2016 at 10:19 pm #691035
    raylay

    Thanks Vinay,
    It works great for 1280×720 but does not work for the following code:

    .postid-415 .mfp-iframe-holder .mfp-content {
    max-width: 720px;
    height: 480px;
}

    It will only open to a height of 405px and cuts off the video. Can we overwrite the height?
    See here: http://chrisgallop.com/blog/portfolio-item/avian-boson-shaft/

    Please log into the site as needed to make updates.
    Thank you!

    September 24, 2016 at 9:31 am #691113
    Vinay

    Hi,

    The link you provided is not working please try to use !important in the code and let us know if that helps.

    .postid-415 .mfp-iframe-holder .mfp-content {
    max-width: 720px!important;    
    min-height: 480px!important;
    height: 480px!important;
}

    Best regards,
    Vinay

    September 24, 2016 at 6:06 pm #691203
    raylay

    Sorry about that, we updated the urls last night! Here is a working link: http://chrisgallop.com/portfolio-item/avian-boson-shaft/

    I added the code above but the lightbox still will not exceed 405px in height.

    You are welcome to log in and adjust as needed.

    • This reply was modified 8 years, 1 month ago by raylay.
    September 24, 2016 at 6:34 pm #691210
    Guenni007

    well i would do it via the scaler container:

    .mfp-iframe-scaler {
     width: 80vw;
     height: 45vw;
     left: 50%;
     top: 50%; 
     transform: translate(-50%, -55%) ! important;
     position: relative;
}

    the vw is video-screen width ( if you got a 16:9 video – 80% of videoscreen-width results in nearly 45% of videoscreen-width for the height)

    • This reply was modified 8 years, 1 month ago by Guenni007.
    September 25, 2016 at 6:05 am #691291
    Vinay

    Hi,


    @Guenni007     thank you again for sharing your code. Your code appears to be working fine even when the height is changes in pixel value :)


    @raylay     Please try the above code provided by Guenni and let us know if you have any questions.

    Best regards,
    Vinay

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.