Why is my property being rendered when I don't call render?

Question

I have a string property, and HTML is getting rendered instead of a string, even though I don't call render where the property is being accessed.

Twig template:

{{ attach_library('mymodule/video') }}

{% if content.video_url|render %}
  <video>
    <source src="{{ content.video_url }}" type="video/mp4">
  </video>
{% endif %}

As you can see, I'm specifying src="{{ content.video_url }}", NOT src="{{ content.video_url|render }}". Still, the rendered HTML is:

<div>


<video>
  <source src="            <div data-quickedit-field-id=" paragraph="" ex_video_url="" en="" default"="" class="field field--name-video-url field--type-string field--label-hidden field__item">video.mp4</video></div>" type="video/mp4">

Why is drupal rendering HTML instead of a string?

Answer 1

content.video_url contains a build array of the field which Twig renders automatically, including the HTML markup of the field template.

To print the raw string value use the entity object which stores the field, node in node.html.twig

{{ node.video_url.value }}

or paragraph in paragraph.html.twig:

{{ paragraph.video_url.value }}