Pull custom attributes / properties within HTML Embed

[patmw (pat)]

Related to this old thread: Components attributes in embed html

For custom use-cases it would be great to be able to link component properties to lines within my custom embedded code (in the same way that it is currently done for Dynamic Embeds within CMS collection items)

Example:
I have a custom embed with the following code,
This is a mockup video player within an iFrame which gets around the lack of lazy-loading for embeded videos in webflow. This is essential for me as the client requires multiple embeded videos on one page but currently there is a drastic performance decrease on page load. (Source: Lazy load embedded YouTube videos | CSS-Tricks - CSS-Tricks)

<style>
.responsive-iframe-container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>

<div class="responsive-iframe-container">
<iframe
class="responsive-iframe"
loading="lazy"
src="https://www.youtube.com/embed/Y8Wp3dafaMQ&autoplay=1"
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=[https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img](https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1%3E%3Cimg) src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>
</div>

Currently, I have to duplicate this embed and then manually edit the code to swap out the “src” / “srcdoc” / “title” properties, but it would be nice to leverage components to map these properties to the webflow editor.

I want to turn this embed into a component, and then create properties relating to:

• title
• srcdoc
• src

Then, as is done with a dynamic embed element, I want to pull these properties in within the embed itself, the result being something like:

<style>
.responsive-iframe-container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>

<div class="responsive-iframe-container">
<iframe
class="responsive-iframe"
loading="lazy"
src=**{{property_src}}**
srcdoc=**{{property_srcdoc}}**
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title=**{{property_title}}**
></iframe>
</div>

However, I don’t see this ability without having to wrap the whole component within a CMS collection, which is really overkill for this particular project as the section on the site is mostly static and won’t likely be updated.

I hope this can be an update to the component system, I imagine it’s not too difficult to implement with the UI that already exists for dynamic embeds.

In the meantime: Does anyone have any suggestions on how to get around this?
It is in fact possible to map the component properties to custom attributes, I have tried for several hours to get the values of the attributes of the ‘html embed’ element itself, from within the html embed. But so far, I have fallen short of success with this.

Any advice would be greatly appreciated!

Best,
Pat

[patmw (pat)]

For a bit more context. The closest I’ve got so far is as follows, using a custom script to try and fetch the attributes manually. This follows a thread I saw somewhere when trying various different options that states that the ‘current script’ will always be the one at the top of the stack upon execution, hence attempting to fetch the tag element and taking the final one in the list, hoping that I can then fetch the attributes of the parent, before manually inserting these properties into my iFrame.

<div class="responsive-iframe-container"> 
  <iframe
    class="responsive-iframe"
  	loading="lazy"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

<script>
var Webflow = Webflow || []
Webflow.push(function () { // Run all the code after the site is fully loaded.  
	console.log("peenyweeny");
  var scriptTag = document.getElementsByTagName('script');
  var thisScript = scriptTag[scriptTag.length - 1];
  console.log(`script tag: ${thisScript}`);
  //var parent = scriptTag.parentNode;
  var parent = thisScript.closest(".video-embed");
  console.log(`parent: ${parent}`);
  var attr_src = parent.getAttribute("attr_src");
  console.log(`parent attr src: ${attr_src}`);
  
  // THEN WE WOULD USE THE FETCHED ATTRIBUTE AND JQUERY TO MANUALLY INSERT THE "SRC" property of the above iframe
}) // The end.
</script>

As you can see in the Inspector, The div with class & id ‘video-embed’ is indeed the parent of the script I have written. But for some reason the output is still undefined, making me think that I’m misunderstanding the way the ‘parent’ attribute works

[patmw (pat)]

And this is how I have my component set up, with the property linking to the attributes (which succesfully populates the ‘video-embed’ as you can see from the HTML hierarchy in the screenshot above)

[patmw (pat)]

For anyone reading this in the future.

I found the solution and have detailed it in the original old thread

@patmw

I’ve figured out another workaround which, in my opinion, is the cleanest of any of the ones suggested here - however still not perfect and hopefully the Webflow team can add this feature into the editor in the same way as the CMS property embeds.

Components attributes in embed html

Hello everyone, I search quite a bit but can’t seem to find the answer. Is there a way to use components custom properties in html-embed, so that each instance of component has different html-embed based on the properties. ps : the html-embed contains svg element (i don’t want to use img because the it will need to load external file)

Bless