3

So I have been using this CSS Tricks responsive video trick for years. The problem I'm having is that this new Craft site I built imported data over from EE into a single Redactor field.

Is there any way to run s conditional check that if there is a YouTube video embedded that would wrap a div around said content?

I'm probably asking too much but Craft has been amazing for the past few years I've using it. I fear the only way to do this would be to run an elaborate MYSQL commands to wrap that content in a div (or use JS to wrap each iframe) but I would love to be proven wrong!

2 Answers 2

5

Check out the Retcon plugin!

Retcon is a small Craft CMS plugin offering a series of easy-to-use Twig filters for manipulating HTML content.

Specifically, it sounds like you need the wrap method:

{{ entry.body|retconWrap('iframe', '.videoWrapper') }}
6
  • Is there any way to pass multiple classes here? For example '.embed-responsive .embed-responsive-16by9' Commented Sep 18, 2018 at 15:24
  • @VaughnD.Taylor I'd recommend posting a new question. This answer is almost 2 years old. Feel free to link back to this thread for reference.
    – Lindsey D
    Commented Sep 18, 2018 at 20:14
  • I actually found a solution using Retcon. I feel like I should post it in case someone else has the same question. Commented Sep 18, 2018 at 21:24
  • 1
    Sounds good! Asking & answering your own question is actually encouraged here on SE. :)
    – Lindsey D
    Commented Sep 18, 2018 at 21:25
  • Sorry, I don't want to sound thick here ... should I post it as a comment, put it as a new answer here, or just ask a whole new question then answer it? I think it's the third option? Commented Sep 18, 2018 at 21:34
1

This article describes Twig macro that makes embedded youtube players responsive and lazy-loaded:

Responsive and lazy-loaded youtube videos with Craft CMS

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.