Resize Youtube Video in Article

Hi @Sarah

Yes this is possible.

Article Code (make sure you use the source code when pasting the code in:

<div class="embed-container"><iframe src="https://www.youtube.com/embed/QILiHiTD3uc" frameborder="0" allowfullscreen=""></iframe></div>

CSS tab

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Thanks Wes! Just applied it to our knowledge base and it works perfectly.

@Sarah - Glad to hear.  Best of luck.

Hey @Wes,

I couldn't find the css tab to place the codes and show videos in the articles: have a look below how my videos are showing in the edit area but not in HC: 

@Marcio - Normally when this occurs it's because "Allow UnSafe Content" is not checked.  Go to your Help Center settings and check the box and that should fix your issue.  If that's not it just let me know.

@Wes, it worked!! Thanks mate :)

@Marcio - Glad to hear, have an awesome day!

@Wes - Has the Guide layout changed since this topic?

I'm trying to find the CSS tab as mentioned here.

Thank you.

@Matt - You should be able to embed YouTube videos directly using the article editor now so yes it has changed.  When you click on the "Add Video" icon you can now post the code directly in so no need to manually do it anymore.

@Wes - Thanks.  We got that working, however, I have another question.

We wanted to embed the video (which works fine), but wanted it to auto-size on mobile devices correctly.  Right now on mobile, it cuts off the video and autosizes for the text underneath.

We were trying the following code, but no success:

<style><!--
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
--></style>
<div class="embed-container"><iframe src="https://www.youtube.com/embed/HDxJEJk9Yg4" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div>

Just wondering if there is a fix or something we are missing, or if it is not yet a feature in Zen Desk Guide to allow this code.

Thank you.

That looks correct, but did you try and use the CSS on the CSS tab and not inline inside of the editor.  Not sure if that will make a difference but I usually put the CSS inside of the CSS tab.  Give that a try.

@Wes - Thanks.  Yeah for some reason, my Customize Design (eye icon) is not working and tries to redirect me.

https://help.*******.com/access/unauthenticated?return_to=/theming 

Keeps hanging here and will not connect.

(**** our site address)