Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 24, 2020 at 10:59 pm #1248276
    John

    I’m trying to embed a lightbox video player, but have to edit base.css because it’s not going to full screen when clicking on the lightbox.

    This is the code I have to edit: 

    img, a img {
border:none;
padding: 0;
margin:0;
display:inline-block;
max-width: 100%;
height:auto;
image-rendering: optimizeQuality;
}

    What does this do exactly for the site? I don’t want anything to break, but I have to delete max-width: 100%; as mentioned below.

    September 29, 2020 at 4:26 am #1249210
    Ismael

    Hey John,

    Thank you for the inquiry.

    The css code above sets the default style of the images in the site, so it should not have affected the video player inside the lightbox.

    Where are you testing this? Please provide the site or page URL so that we could check the elements.

    Best regards,
    Ismael

    September 29, 2020 at 4:28 am #1249211
    John

    It’s on the page below under Featured videos

    September 29, 2020 at 5:07 am #1249219
    Ismael

    Hi John,

    Thank you for the quick update.

    Looks like you are using a different lightbox plugin. To make the lightbox container full width, we could add this code in the Quick CSS field or the child theme’ style.css file.

    #vidyard-popbox {
	width: 100%;
	height: 100%;
}

#vidyard-content-fixed {
	z-index: 900;
	text-align: center;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
}

    Cheers!
    Ismael

    September 29, 2020 at 4:23 pm #1249415
    John

    Hi Ismael, this works for the lightbox, but the thumbnail preview is showing stretched before you click on the video. Below is another one for example.

    October 2, 2020 at 8:39 am #1249991
    Ismael

    Hi,

    Thank you for the update.

    We do not see an image preview when we try to open the player in the lightbox. The video automatically buffers or plays without displaying any image. Please check the screenshot below.

    // https://imgur.com/a/O2MDjq6

    This might require additional css adjustment but we have to check the elements first in order to provide the necessary code.

    Best regards,
    Ismael

    October 2, 2020 at 2:25 pm #1250089
    John

    This is what I’m seeing. I provided a screenshot below. The video thumbnail is stretched for the lightbox videos. The video itself is fine once you click on it.

    October 5, 2020 at 9:37 pm #1250653
    John

    So how would I edit this code so the player doesn’t do the below?

    October 6, 2020 at 11:54 am #1250817
    Ismael

    Hi,

    Thank you for the info.

    That is not how we see the section or video preview on our end. Please check the Firefox screenshot below.

    Screenshot: https://imgur.com/LJVHLX7

    Which browser are you using, or where are you testing the site?

    Best regards,
    Ismael

    October 6, 2020 at 11:12 pm #1251000
    John

    Hi, I was able to fix it within the video embed code by changing the height of the thumbnail. Thanks. You can close this.

    October 8, 2020 at 5:13 am #1251258
    Rikard

    Hi,

    Great, I’m glad that you found a solution and thanks for the update. I’ll go ahead and close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Editing base.css for Lightbox video’ is closed to new replies.