Recent searches


No recent searches

Inserting videos in articles and content blocks



image avatar

Jennifer Rowe

Zendesk Documentation Team

Edited Dec 06, 2024


10

48

48 comments

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


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

Hi Vemmal-N

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

Thanks

0


0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity 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


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


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity 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


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


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity 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


image avatar

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


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!

2


Hello,

I would like to insert the following code to insert a video

<video width="100%" height="100%" controls autoplay controlsList="nodownload" oncontextmenu="return false;"><source src="myvideo.mp4" type="video/mp4" /></video>

When saved, the text in bold is ignored. Can you help ?

0


image avatar

Greg Katechis

Zendesk Developer Advocacy

Hi Eric! If you take a look at the safe tags, you would need to allow unsafe tags for this to potentially work. Even with that, it is possible that the editor might strip it out, but I would recommend trying that first to see if you have better results.

0


image avatar

Dane

Zendesk Engineering

Hi Alice,

Based on the ticket that the user submitted, Classic is the option that is supported. The new set up is not compatible yet.

0


Hi Dane

Any idea when the MS Stream (on Sharepoint) will be supported? As that replaces the MS Stream (Classic) - which is supported. 

2


Any ideas why if I embed 2 Vimeo videos in an article only the second one displays?  (It's not an issue with the 1st video because if I reverse the order, still only the second one displays. Inspecting the page with devtools shows that zd completely skipped the first video, didn't even try to insert it - there is no coding for it at all.)

 

 

0


image avatar

Paolo

Zendesk Engineering

Hi Mark,
 
This would require further troubleshooting and we would need to see how the videos were embedded. That said, I highly suggest reaching out to our Support Team and sharing as much information as possible. For reference, here is how you can open a ticket Contacting Zendesk Customer Support.
 
Thanks!
 
Best,

0


After a year , there's still no update on the support of MS Stream (on Sharepoint).
Care to share any update or any possible future roadmap on that functionality?

0


Please sign in to leave a comment.