Embedded Video Size Smaller

Support
#1

Hello, I am trying to make my embedded video smaller to match the attached image. I tried editing the size, but it would not change it in the column as you can see in the link.

Page

#2

Hi Jonathan,

Thanks for writing in!

Regretfully we cannot view your page because WordFence isn’t allow us. Please temporarily disable WordFence or at least allow us to view your page so that we can check it and give you the resolution to your issue.

Regards.

#3

Hello, I published the page, please try now.

#4

Hey Jonathan,

I tried to check your page but the access is being blocked by your security plugin. Can you please temporarily disable WordFence plugin so we can take a look at your page setup?

Thanks!

#5

Hi Nabeel,

I disabled the firewall for Wordfence. Can you try again? Thank you.

#6

Hey Jonathan,

Thanks for deactivating the firewall. I’ve seen your page and you’re using the Video element Embed mode. Please inspect the element and click on the Frame partial. Under this partial, you’ll be able to resize the video width and the aspect ratio. For a full tutorial about the Frame partial, please see our Partials documentation at https://theme.co/apex/forum/t/elements-using-partials/213

Hope that helps.

#7

Thank you, I will give it a try.

#8

Sure, do let us know how this goes!

#9

I was able to resize the video players, thank you. I have one last question. How do I get the social icon and text to be side by side like in the attached photo? On the site now I have the social icon for instagram and the text of LaserYouTat but they are stacked and not in a single row.

#10

Hello Jonathan,

Thanks for updating the thread.

Please inspect the Section > Column and click on Customize > Setup > Element CSS and add following CSS:

$el{display: inline-flex;}

Please add the CSS to both Columns holding Instagram and Facebook Social icons.

Thanks.

#11

I added the inline-flex, but I did not notice any new menu options to choose from. I still am unable to get the text side by side to the social icon.

#12

Hey Jonathan,

Try replacing the previous code with the following code in both of your columns:

$el {
    display: inline-flex !important;
    align-items: center;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#13

That did it, thank you very much for your help!

#14

Glad to hear that. :slight_smile:

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.