• ModeratorWes

  • 2 mai 2016 18:08

  

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

• Sarah Hong

  • 2 mai 2016 19:20

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

• ModeratorWes

  • 2 mai 2016 19:21

  

  @Sarah - Glad to hear.  Best of luck.

• Marcio

  • 15 avril 2017 19:20

  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: 

  
  
  

• ModeratorWes

  • 17 avril 2017 13:05

  

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

• Marcio

  • 18 avril 2017 12:52

  @Wes, it worked!! Thanks mate :)

• ModeratorWes

  • 18 avril 2017 13:11

  

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

• Matt McCluskey

  • 1 août 2018 17:52

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

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

  Thank you.

• ModeratorWes

  • 1 août 2018 17:56

  

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

• Matt McCluskey

  • 1 août 2018 18:02

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

• ModeratorWes

  • 1 août 2018 18:10

  

  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.

• Matt McCluskey

  • 1 août 2018 18:36

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

Cette publication n’accepte pas de commentaire.