Embed YouTube Video not displaying when code is in TextArea or TextField

Question

I am running EE 5.2.6 and have an issue with embedding YouTube videos in a TextArea or TextField. If I do it this way, it does not display the video from the channel entry field.

...
<div class="video" >
    {video} 
</div>
...

If I add the code directly into the template like this it shows fine:

<div class="video" >
        <iframe width="560" height="315" src="https://www.youtube.com/embed/g0ev7HxaWdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

The TextArea is set to formatting None, but it appears that the field is still stripping out the special characters somehow, thus preventing the video from displaying properly and there is no trace of the iframe in the browser inspection window.

Does anyone know how to resolve this?

Answer 1

Is the value of {video} the entire iframe? if so it's likely because you have double quotes.

Why would you not just have {video} be the YouTube url and do something like this

{if video != ''}
<div class="video" >
    <iframe 
        width="560" 
        height="315" 
        src="{video}" 
        frameborder="0" 
        allow="accelerometer; 
        autoplay; 
        encrypted-media; 
        gyroscope; 
        picture-in-picture" 
        allowfullscreen>
    </iframe>
</div>
{/if}

This will check to see that there is a {video} value and if so build an iframe with the {video} value as the src.