Inserting videos in articles and content blocks

Return to top

39 Comments

  • Vemmal N

    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
  • Vemmal N

    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
  • Vemmal N

    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

Please sign in to leave a comment.

Powered by Zendesk