# Pinegrow Theme Converter does not replace paths for html block with video file from Webflow when exporting to WP

**URL:** <https://forum.pinegrow.com/t/pinegrow-theme-converter-does-not-replace-paths-for-html-block-with-video-file-from-webflow-when-exporting-to-wp/6219>\
**Category:** Pinegrow Theme Converter\
**Tags:** bug\
**Created:** [February 7, 2022, 10:37am UTC](https://forum.pinegrow.com/t/pinegrow-theme-converter-does-not-replace-paths-for-html-block-with-video-file-from-webflow-when-exporting-to-wp/6219 "2022-02-07T10:37:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Catative](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/catative/32/4019_2.png) [@Catative](https://forum.pinegrow.com/u/Catative)\
**Post date:** [February 7, 2022, 10:37am UTC](https://forum.pinegrow.com/t/pinegrow-theme-converter-does-not-replace-paths-for-html-block-with-video-file-from-webflow-when-exporting-to-wp/6219/1 "2022-02-07T10:37:54Z")

</div>

Hello. I have a video block in my _Webflow_ project. When exporting my project from _Webflow_ as a zip-archive, this block is described in the **index.html** file with the following code:

```auto
<div
    data-poster-url="videos/intro-bg-video-1q-poster-00001.jpg"
    data-video-urls="videos/intro-bg-video-1q-transcode.mp4,videos/intro-bg-video-1q-transcode.webm"
    data-autoplay="true" 
    data-loop="true"
    data-wf-ignore="true"
    class="background-video-2 w-background-video w-background-video-atom">

    <video
            autoplay=""
            loop=""
            style="background-image:url(&quot;videos/intro-bg-video-1q-poster-00001.jpg&quot;)"
            muted=""
            playsinline=""
            data-wf-ignore="true"
            data-object-fit="cover">

        <source src="videos/intro-bg-video-1q-transcode.mp4" data-wf-ignore="true">
        <source src="videos/intro-bg-video-1q-transcode.webm" data-wf-ignore="true">
    </video>
</div>

```

After exporting the theme, _PineGrow Theme Converter_ generates the following code for this block:

```auto
<div 
    data-poster-url="videos/intro-bg-video-1q-poster-00001.jpg" 
    data-video-urls="videos/intro-bg-video-1q-transcode.mp4,videos/intro-bg-video-1q-transcode.webm" 
    data-autoplay="true" 
    data-loop="true" 
    data-wf-ignore="true" 
    class="background-video-2 w-background-video w-background-video-atom">
    
    <video 
        autoplay="" 
        loop="" 
        style="background-image:url("<?php echo esc_url( get_template_directory_uri() ); ?>/videos/intro-bg-video-1q-poster-00001.jpg")" 
        muted="" 
        playsinline="" 
        data-wf-ignore="true" 
        data-object-fit="cover">
        
        <source src="videos/intro-bg-video-1q-transcode.mp4" data-wf-ignore="true">
        <source src="videos/intro-bg-video-1q-transcode.webm" data-wf-ignore="true">
    </video>
</div>

```

After exporting theme and opening **index.php** page in _Wordpress_, video doesn’t work.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [February 7, 2022, 11:23am UTC](https://forum.pinegrow.com/t/pinegrow-theme-converter-does-not-replace-paths-for-html-block-with-video-file-from-webflow-when-exporting-to-wp/6219/2 "2022-02-07T11:23:36Z")

</div>

Hi @Catative,  
It is a little hard to fully trouble-shoot what is going on, but two thoughts. First, the Theme Converter isn’t properly closing the quotes for your video style - this may be causing problems and need some hand editing. Second, for some reason the source src attributes aren’t being re-written to include the template directory.  
Hope this helps a little,  
Bob

---

<div class="post-metadata">

**Author:** ![Catative](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/catative/32/4019_2.png) [@Catative](https://forum.pinegrow.com/u/Catative)\
**Post date:** [February 9, 2022, 12:16pm UTC](https://forum.pinegrow.com/t/pinegrow-theme-converter-does-not-replace-paths-for-html-block-with-video-file-from-webflow-when-exporting-to-wp/6219/3 "2022-02-09T12:16:52Z")

</div>

Thank you for the quick response, @RobM. Your guess turned out to be correct.

What happened:

1. For some reason Webflow adds extra quotes with `&quot` expression:

```auto
style="background-image:url(&quot;videos/intro-bg-video-1q-poster-00001.jpg&quot;)"

```

So when Pinegrow Theme Converter adds php code, these unnecessary quotes are added. This results in an error setting the background image.

1. For some reason, PineGrow ignored adding the `esc_url(get_template_directory_uri())` code to the `src` attributes of the `<source>` tag.

**Solution:**

I added manual generation of the correct paths using the “PHP code action” of the PineGrow.

 ![ksnip_20220209-190757](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9c14caeea728680553d0681151411c823a3b8126.png)

 ![ksnip_20220209-190844](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/a2720a4e9818ed69054c6b9ae838463f7d08f6d3.png)

 ![ksnip_20220209-190852](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/d56ebc131a16cb6230cc05bc080d3c317b10b739.png)

I placed all the functions that are used in the “PHP code action” in a separate file `inc/custom.php` and included it in `functions.php`.

Contents of `custom.php` file:

```auto
<?php

function get_video_bg_img_path() {
    return 'background-image:url(' . esc_url(get_template_directory_uri()) . '/videos/intro-bg-video-1q-poster-00001.jpg)';
}

function get_video_mp4_src_path() {
    return esc_url(get_template_directory_uri()) . '/videos/intro-bg-video-1q-transcode.mp4';
}

function get_video_webm_src_path() {
    return esc_url(get_template_directory_uri()) . '/videos/intro-bg-video-1q-transcode.webm';
}

```

Part of the `functions.php` file:

```auto
...

/* Pinegrow generated Include Resources End */
require_once "inc/custom.php";

?>

```

---

<div class="post-metadata">

**Author:** ![Catative](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/catative/32/4019_2.png) [@Catative](https://forum.pinegrow.com/u/Catative)\
**Post date:** [February 10, 2022, 7:50am UTC](https://forum.pinegrow.com/t/pinegrow-theme-converter-does-not-replace-paths-for-html-block-with-video-file-from-webflow-when-exporting-to-wp/6219/4 "2022-02-10T07:50:33Z")

</div>

Also, if you make a button with a lottie animation in Webflow (block with lottie animation nested in div block), Pinegrow will not add` <?php echo esc_url( get_template_directory_uri() ); ?>` code to the data-src attribute, which is required by the Webflow script to correctly track and run the animation

html burger button markup that is generated by Webflow:

```auto
          <div data-w-id="9623d14c-54d0-69c0-a85f-fc5544b0d884" class="top-header-menu-btn">
            <div data-w-id="2b366835-69f5-e59b-29c8-e2d25293d467" data-animation-type="lottie" data-src="documents/burger-btn-gray.json" data-loop="0" data-direction="1" data-autoplay="0" data-is-ix2-target="1" data-renderer="svg" data-default-duration="1.3" data-duration="0" data-ix2-initial-state="0" class="top-header-menu-btn_animation"></div>
          </div>

```

Burger button in Webflow navigator:

 ![lottie](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/0ccd109bbed367e9ffaf775e3e5f3e01c49f653d.png)

Burger button on Webflow layout:

![lottie 3](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/249e11f7650edd09d4030760c724d85742e57b6d.png)

**Solution:** the problem is solved by analogy with my answer in the post above.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [February 10, 2022, 10:29am UTC](https://forum.pinegrow.com/t/pinegrow-theme-converter-does-not-replace-paths-for-html-block-with-video-file-from-webflow-when-exporting-to-wp/6219/5 "2022-02-10T10:29:05Z")

</div>

Hi @Catative,  
Understanding what goes in ‘data’ attributes can be pretty tough to auto-correct. Glad you are finding a way to make it work.  
Bob

---

<div class="post-metadata">

**Author:** ![Catative](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/catative/32/4019_2.png) [@Catative](https://forum.pinegrow.com/u/Catative)\
**Post date:** [February 15, 2022, 4:11am UTC](https://forum.pinegrow.com/t/pinegrow-theme-converter-does-not-replace-paths-for-html-block-with-video-file-from-webflow-when-exporting-to-wp/6219/6 "2022-02-15T04:11:55Z")

</div>

ok, thanks for answer