How to render html video body in twig

Madhav

7/11/23, 1:13 PM

I have following code in my CustomVideoBlock.php file

foreach ($video_result as $video){
    $title = $video->title;
    $video_body = $video->body_value; 
  }

$video_data = filter_var($video_body, FILTER_SANITIZE_FULL_SPECIAL_CHARS);

The $video_data hold this kind of value

<div itemscope="" itemtype="https://schema.org/VideoObject"><meta itemprop="uploadDate" content="Fri Jan 21 2022 15:15:46 GMT-0600 (Central Standard Time)"><meta itemprop="name" content="Laredo Economic Development"><meta itemprop="duration" content="P0Y0M0DT0H2M59S"><meta itemprop="thumbnailUrl" content="https://cdn.jwplayer.com/thumbs/vbnSJqwQ-720.jpg"><meta itemprop="contentUrl" content="https://content.jwplatform.com/videos/vbnSJqwQ-ja6y4YQJ.m4a"></div>

And i am returning below to the twig template file(video-block).

$renderable = [
    '#theme' => 'video-block',
    '#title' => $title,
    '#description' => $video_data
  ];
  return $renderable;

In the twig file i am rendering the variables.

<h6>Title {{ title }}</h6>
{{ description | raw}}

But i am getting the whole html body on browser in double quotes. My requirement is to render the video on browser. Where i am doing wrong ?

0 + 0

theming

Madhav

7/11/23, 1:16 PM

The $video_data hold this kind of value $video_data = <div itemscope="" itemtype="https://schema.org/VideoObject"><meta itemprop="uploadDate" content="Fri Jan 21 2022 15:15:46 GMT-0600 (Central Standard Time)"><meta itemprop="name" content="Laredo Economic Development"><meta itemprop="duration" content="P0Y0M0DT0H2M59S"><meta itemprop="thumbnailUrl" content="https://cdn.jwplayer.com/thumbs/vbnSJqwQ-720.jpg"><meta itemprop="contentUrl" content="https://content.jwplatform.com/videos/vbnSJqwQ-ja6y4YQJ.m4a"></div>

Kevin

7/11/23, 3:05 PM

The input should only be the video URL (why not use Media for local or remote content?). The theme function and template should render the surrounding markup. Then you do not need to use the raw filter, and receiving user input is safer than allowing copy paste as such.

Madhav

7/11/23, 4:06 PM

The value that $video_data holds is coming from database. So we have to pass it to twig and process it there.

anonymous

7/12/23, 1:53 AM

It is poor design to store the full markup in the database. As an example, how do you construct a database query to retrieve videos uploaded within a date range, if the date of the video is in a non-standard format and embedded in a markup string? The markup should be separated from the content - that's just one of the reasons we defer rendering and allow the markup to be customized in a theme template using Twig. If you can't change the data design, then just parse the needed information out of your $video_data string and reconstruct the markup in the template.

john Smith

7/22/23, 9:18 AM

i agree to all previous commenters, but to solve your issue with your code as is you probably need to also set the flag `FILTER_FLAG_NO_ENCODE_QUOTES`

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: How to render html video body in twig

TH: วิธีเรนเดอร์เนื้อหาวิดีโอ html ในทวิก

RO: Cum să redați corpul video html în twig

RU: Как визуализировать html-видео в twig

VI: Cách hiển thị nội dung video html trong twig

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.