JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper940">
        <div class="title">the title</div>
        <div class="para">
            <p>The main content of the post.</p>
            <p>Which could be several paragraphs</p>
            <p>And include iframes...</p>
            <p><iframe src="//www.youtube.com/embed/uGMbZNTym-g" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen">...</iframe>
            </p>
            <p>Followed by more text... and maybe some images....</p>
            <p><a href="http://www.joujouka.org/wp-content/uploads/2014/05/festival-interculture.jpg"><img class="alignnone size-medium wp-image-404" alt="festival intercultural" src="http://www.joujouka.org/wp-content/uploads/2014/05/festival-interculture-213x300.jpg" width="213" height="300"/></a>
                </p>
    </div>
</div>

CSS

.para {
    background-color: #CCC;
}

JavaScript

jQuery("document").ready (function($){
    var matchesEl = $(".para img, .para iframe");
	if ( matchesEl.length > 0) {

		var newUl = $("<ul></ul>");
		newUl.prependTo(matchesEl.parents(".wrapper940"));
        
        matchesEl.each(function() {

	      	$("<li></li>").append($(this)).appendTo(newUl);
            
        });
        
	}	
});