ACF Pro - Output HTML5 video in Raw Content element

[one_eyed_man]

Hi guys. So I set up a Posts (Tiles) element where a static thumbnail is displayed by default, and upon hover a self-hosted .mp4 and some ACF Pro text fades in.

Going off @tristup’s suggestion in this thread, I added a Raw Content element to hold the <video> HTML.

When I paste the HTML for the hover video in the Raw Content, it works perfectly:

However, when I paste the same code in an ACF field on the post’s page, and then try to call this field dynamically with an ACF shortcode in the Raw Content element, it doesn’t work (on hover it displays the ACF text but not the ACF video):

Any idea why the ACF shortcode isn’t working for my HTML 5 video? Is there a better container for it than a Raw Content element?

[ruenel]

Hello @one_eyed_man,

Thanks for writing in! Be advised that the Raw Content Element has only one option and it is the Content . You can add any valid HTML code inside the content option. Inserting a dynamic content on the other hand may or may not work. You may need to use the ACF shortcode instead.

• ACF | Displaying values in your theme (advancedcustomfields.com)

If you still want to use the Dynamic Content shortcode, it would be best to use the Text element instead.

Kindly let us know how it goes.

[one_eyed_man]

Hi @ruenel, thanks for your response. To clarify, you’re saying that Dynamic Content doesn’t work in the Raw Content element? I thought the cylinder button means that Dynamic Content is allowed?

At any rate, I read the article you linked and tried to enter an ACF shortcode in Raw Content. Unfortunately, the video did not appear (do I have to enter something on my functions.php page as well?):

I also tried using the Dynamic Content shortcode in a Text element, but that didn’t seem to do anything either :

And finally I tried a Video element with the Dynamic Content shortcode as the source, but when I hover it just shows a gray box where the video should be:

I’m sorry if I misunderstood anything you said, this is all quite new to me and I’m trying to learn. Thank you for
your patience, and please let me know if I did something wrong.

(Note: For testing purposes, I’m using the same code in the “Hover MP4” field on all my homepage posts. Here is the code for your reference; it works fine when I paste it directly into a Raw Content field:)

<video webkit-playsinline playsinline loop muted height="100%">
    <source src="https://glyphvisual.com/wp-content/uploads/2022/06/THUMBNAIL-Health.com-21-Days-to-Improve-Her-Financial-Health-1Mbps.mp4" type="video/mp4">
</video>

[prakash_s]

Hello @one_eyed_man,

I checked your site setting it seems that you have not added the correct video code in the post meta field, I went ahead and created a test page and it seems that the dynamic content code is pulling the data and the video is working fine for one post since you have added the code properly there.

Please have a look at this article to learn more about how to add the correct video code.

HTML Video

Thanks

[one_eyed_man]

Hi @prakash_s - you’re right, I forgot to add autoplay to a few of the video codes, I corrected that now. The videos still weren’t showing up when I tried to use the Dynamic Content code on my homepage rather than your test page, so I deleted the Raw Content element and it’s div container and made them again, and now it seems to be working. (I also added the {{dc:acf:post_field field="hover_mp4"}} code by clicking on the Dynamic Content icon and finding it in the menu rather than copy-pasting it as I had been.)

Not exactly sure which part fixed it but I won’t question it. Thanks for your help!

For reference, here are the div settings that worked for me (i.e. changed position to Absolute, turned on Flexbox with horizontal center, and added the interaction fade-in under Effects):

[ruenel]

You are most welcome, @one_eyed_man. And thank you for sharing that information as well.