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($){
	
	// First I set up a conditional loop: if images or iframes are found in .para, do the following
	if ( $(".para img, .para iframe").length > 0) {

		// ... create the <ul>
		var newUl = $("<ul></ul>");
		// and move it to the desired location, just inside .wrapper940
		newUl.prependTo($(this).parents(".wrapper940"));

		// Now I start the loop for each image or iframe found
		$(this).each(function() {

			// For each one I create an <li> element.
	      	var newLi = $("<li></li>");

	      	// Now I put the li element into the <ul> that I created above
	     	newLi.appendTo($(this).parents("newUl"));

	      	// Last I put 'this' into the new <li>.
	      	newLi.append(this);

		});
	});
});