Resize Youtube Video in Article

12 Comments

  • Wes Drury

    @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.

    1
  • Wes Drury

    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%; }

    0
  • Sarah Hong

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

    0
  • Wes Drury

    @Sarah - Glad to hear.  Best of luck.

    0
  • Marcio

    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: 



    0
  • Marcio

    @Wes, it worked!! Thanks mate :)

    0
  • Wes Drury

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

    0
  • Matt McCluskey

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

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

    Thank you.

    0
  • Wes Drury

    @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.

    0
  • Matt McCluskey

    @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.

    0
  • Wes Drury

    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.

    0
  • Matt McCluskey

    @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)

    0

Please sign in to leave a comment.

Powered by Zendesk