Rahul.Valani Rahul.Valani - 4 months ago 14
CSS Question

Wrap parent text/ css

I am trying to add a caption under an image which is responsive so my code looks like this



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');
}

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row vid">
<figure>
<img class="img-responsive" src="resources/image/18/85/a.jpg" 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>





Here I have two issues:

My caption is long so it goes out of the way and I want my data title to become
<figcaption>
so I dont have to rewrite it

Answer

Just need to make img width 100%:

Here's a fiddle where image and text stay the same width/size on all resizes:

https://jsfiddle.net/h9kj04kv/

.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%;
  }

If you want to keep it from getting too big then just add a max-width and max-height to the vid div.

EDIT: Didn't see second part.

To inject your text into the data-title just add this:

$(function(){
   $('.img-responsive').attr('data-title', $(figcaption).text())

})

And finally to keep images the same size as text/caption:

$(function(){
   figWidth = $(figcaption).width()
   $('.img-responsive').css('width', figWidth)
})

UPDATE: If you have many videos in a row you will need to create a grid system.

<div class="row vid">
<div style="width: 25%; float:left;">
            <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
                </figcaption>
            </figure>
</div>
<div style="width: 25%; float:left;">
            <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
                </figcaption>
            </figure>
</div>
<div style="width: 25%; float:left;">
            <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
                </figcaption>
            </figure>
</div>
<div style="width: 25%; float:left;">
            <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
                </figcaption>
            </figure>
</div>
               </div>