Embedded Youtube Video Attribute on mobile

Hello, I have created an embedded attribute for youtube videos, the video resolution is perfect on PC but on mobile the video resolution is too large to fit on the mobile device screen.

Mobile Screenshot:

I kindly require assistance on adjusting the video resolution to fit mobile devices.

Thanks.

2 Likes

Hi! Log in with admin. In the frontend editor, there is a little brush on the top left, click on that.
There is a sidebar now, on the left. At the bottom, you see a custom css section, open it, and copy/paste this:

.hp-listing__attribute.hp-listing__attribute--youtube,iframe{
	width:auto;
	height:auto;
}

Save your settings, and close the editor with x.
As you see, this attribute name is simple just: attribute–youtube ← you need to rename this for the same name is your attribute name. this will place a nice but little player frame, It doesn’t matter if you place it on the primary or secondary page

2 Likes

Hello, I have pasted the code in the additional CSS section but it did not work, I then pasted this directly in the theme file editor CSS file and it worked:

I am not sure why it is not working on the additional CSS.

However this code did resolve my issue,

Thank you very much. :grinning: :grinning:

1 Like

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