Inserting videos in articles and content blocks

Return to top

40 Comments

  • LottieFiles

    Hi all

    Does anyone here know how can I do the following;

    • make the Video corners curved
    • add shadows behind the video
    • make the size of the video the same width as the text. right now it looks small and strange.

    I have inserted the video using Vimeo. Here's my code.

    <p>
      To get a QR code to scan and test your animation on mobile by using the Lottiefiles
      app, you can go to the
      <span class="notion-enable-hover" data-token-index="1" data-reactroot="">QR</span>
      icon
      <img src="/hc/article_attachments/9517551336729/mceclip1.png" alt="mceclip1.png" width="28" height="40">
      on the top right. This is available for both Android and iOS!
    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p style="display: flex; justify-content: center;">
      <iframe src="//player.vimeo.com/video/731981xx?autoplay=1&amp;loop=1" width="560" height="350" frameborder="0" allowfullscreen=""></iframe>
    </p> 

     

    Right now, it looks like this in the article section

     

     

    0
  • Pulkit Pandey
    Community Moderator

    Hi Vemmal-N

    Can you please share the url of the article where you are implementing the video part

    Thanks

    0
  • LottieFiles

    Hi Pulkit Pandey

    This is where we are planning to implement it
    https://help.lottiefiles.com/hc/en-us/articles/8705456865689-QR-Code 

    0
  • Pulkit Pandey
    Community Moderator

    Hi Vemmal N

    Sorry for the late replay :)

    Please add a new class to your iframe called "videos" and then add the below CSS at the end of your style.css file 

    .videos {
    border-radius: 5px;
      box-shadow: rgb(0 0 0 / 25%) 0px 14px 28px, rgb(0 0 0 / 22%) 0px 10px 10px;
    }

     

    Let me know if it solves your issue

    Thanks 

    Pulkit 

    Team Diziana

    0
  • LottieFiles

    Pulkit Pandey

    Thank you so much! That solved most of my issues except for 1.

    • make the size of the video the same width as the text. right now it looks small and strange.

    how can I make the text the same width as the video?

    0
  • Pulkit Pandey
    Community Moderator

    Hi Vemmal N

    Please replace the below CSS with your current one 

    .videos {
      border-radius: 5px;
      box-shadow: rgb(0 0 0 / 25%) 0px 14px 28px, rgb(0 0 0 / 22%) 0px 10px 10px;
      width: 100%;
    }

    Let me know if it solves your issue

     

    Thanks

    Pulkit

    Team Diziana

    0
  • Javier Abadía

    Hi,

    We are trying to embed a video hosted in our own servers. However, it seems that zendesk is removing some of the attributes we add to the `video` tag. For example:

    <video
      src="<our url to a video hosted in our server>.mp4"
      controls="yes"
      controlslist="nodownload"
      width="100%"
      preload="auto"
    ></video>

     

    The video is showing ok, but the `controlslist="nodownload"` is removed. Is there a way to add such attributes?

    Thank you

    0
  • Pulkit Pandey
    Community Moderator

    Hi Javier,

    You can add the missing attributes with the help of Javascript, please follow the below steps to add it

    1. Add a new class called “videoattr” on your video tag which you are using to embed video .

    As shown below

    2. Now add the below script at the bottom of your script.js file

    var i;
    var videosAttr = document.querySelectorAll(“.videoattr”) ;
    for(i=0; I<= videosAttr.length;i++) {
    videosAttr[i].setAttribute(“controlslist”, “no download”);
    }
    Let me know if it solves your issue

    Thanks
    Pulkit

    0
  • Brett Bowser
    Zendesk Community Manager
    Hey Javier,

    I'd recommend taking a look at this article which goes over editing your Guide theme.
     
    Customizing your Help Center 
     
    I hope this helps!
    0
  • F. Keijmes

    Dear all, I just noticed that this article has been updated, now including Microsoft Stream as one of the video platforms which Zendesk supports.

    There seems to be no further info around this within Zendesk.
    Microsoft though has indicated their Strategy shift for Stream, from Stream (Classic) to Stream (on SharePoint). I have to assume that the support from Zendesk for Stream is based on the new Stream (on SharePoint) and not Stream (Classic)? Can this be confirmed?
    Zendesk Guide articles still don't include a visual support message to support Stream, nor can a link from Stream (Mainly a MS SharePoint link) be included. Only the iFrame embedment is working, although its not clear how the permissions work from MS to ZD, as we have an online MS O365 setup, but as far as I know we don't allow to share links externally.
    The Stream link in ZD Guide article works for me, but that probably only because I have access to it as an employee of our MS O265 tenant.


    Is there more info about this new feature including what the possibilities are as well as how to manage it? 
    Many thanks!

    0

Please sign in to leave a comment.

Powered by Zendesk