Hi All,
I have an input box that users can embed an iframe, however not all iframes (depending on the source) fill the full frame width. I can manually adjust the iframe to 100% which nicely fills the frame, however, I’m trying to figure out a way to replace the width from the iframe code with ‘100%’ on submit of the form.
Does anyone know the process I would need to go through to find the width parameter and replace it within the submit form process?
Thanks
Need more details with screenshots.
Perhaps I’ll ask my question another way that makes more sense than screen shots will.
How do I find this width=“560” in a line of iframe code when I don’t know what the width value is and the position of the width attribute is not consistent depending on the source.
YouTube
iframe width=“560” height=“315” src=“https://www.youtube.com/embed/m3VqpX3GVdo” frameborder=“0” allowfullscreen></iframe
Vimeo
iframe src=“https://player.vimeo.com/video/174608541” width=“640” height=“360” frameborder=“0” webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe
Can I use a wildcard in place of the width dimension so I can find width="%" or width="*" so it will return anything that matches width="", regardless if its a 3 digit or 4 digit width dimension.
I have been easily able to find width=" but I can’t figure out what wildcard to use to also find the full string to the second quote mark.
I think that if I can find that full value, I can then build a condition that rebuilds the value replacing;
width=“560” or width=“1200” to
width=“100%”
Thanks very much.
Sorry I am used to visuals, spending a lot of time on the editor. I don’t really understand your question, but based on my interpretation of your question could insert a dynamic data in the place of width
Thanks Murad.
Yeah, this is kind of on the track I am thinking, but I need to be able to dynamically search the iframe code to locate the width and then replace the value with “100%”.
Here is a screen shot of the input field that users will be inputting the code into.
The comment section is styled on a Facebook feed in its appearance and as you expect in Facebook, the media fills the post width to its defined dimensions. This is what I am trying to accomplish in this case.
As you can see in this image, I need to change the width of the code from “560” to “100%”
Here is another image of the iframe code from Vimeo
In the second image you can see that the width is “640” and is located in a different position within the code so I can’t simply truncate and replace.
If you look at the videos and how they appear, the YouTube clip doesn’t quite take up the full space and the Vimeo video overshoots the defined contained width.
To make my UI nice and clean, they need to be “100%” so they fill the space appropriately.
Hope this helps to clarify the problem.
Cheers
Sorry again I missed the part that its the users enter in the iframe code
Off the top of my head, you could have the users enter the url and width information in separate inputs
But that would complicate things, let me think about for a while
You could have users just enter the url and you could display it dynamically inside a default iframe, if each user doesn’t require different width and height
Thanks Murad.
Yeah, I’m trying to simplify the input as much as possible and don’t really want to put the formatting side of things onto the user. That won’t be a very good user experience.
Unfortunately because my three main inputs (YouTube, Vimeo and Soundcloud) all have different default widths that need the dynamic search and replace them with the 100%.
I appreciate you having a think about this and helping out. Really hoping I can find something here.
Cheers
your welcome, hope you find a solution
If the widths are the same within the video provider, then you could have three different iframes, and hide / show depending on the workflow ?
