JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.min.js"></script>
        <div class="row vid">
            <figure>
                <img class="img-responsive"  src="https://i.stack.imgur.com/lro0o.png?s=48&g=1" data-title='Want this to be same as figcaption' data-src="https://www.youtube.com/embed/path-to video?autoplay=1"  onclick="showVideo(this)" /> 
                <figcaption>
                    This is long text which overlaps the caption beside it I Want it to break automatically according to window size
                </figcaption>
            </figure>
               </div>

CSS

figure {
display: inline-block;
 }
figcaption {
margin: 10px 0 0 0;
font-variant: small-caps;
font-family: Arial;
font-weight: bold;
color: #bb3333;
 }
figure {
   padding: 5px;    
 }


 .vid img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
 }
 .vid img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;   
   padding:1px;
  border:1px solid #021a40;
  width: 100%;
  }

JavaScript

function showVideo(obj){
    $("#youtube").attr("src", $(obj).data("src"));
   $('#videoModalLabel').text($(obj).data("title"));
   $("#videoModal").on("hide.bs.modal", function () { 
    $("#youtube").removeAttr("src");
   }).modal('show');
}