Movie Answer

by Cupidvogel

HTML

<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<div class='videoEmbedder'>
        <span class='videoEmbeddedVideoPlay'><i class="far fa-play-circle"></i></span>

        <img src='https://img.youtube.com/vi/X_5_BLt76c0/hqdefault.jpg' />
        <div class='videoEmbeddedContent'>
        <div class = 'videoProviderDetails'>
        <span class = 'channelName'>Star Sports</span>
        <span> · </span>
        <span>24th February</span>
        </div>
          <div class = 'videoTitle'>
            Rahul Dravid - King of the kings, lord of the lords.
          </div>
          <div class = 'videoDesc'>
            Idhar chala mein udhar chala jaane kaha mein fisal gaya are fisal gaya ye tune kya kiya. Idhar chala mein udhar chala jaane kaha mein fisal gaya are fisal gaya ye tune kya kiya. 
          </div>
          <div class = 'provider'>
          <span>YouTube</span>
          <span> | </span>
          <span>01:05</span>
          <span> | </span>
          <span>245,000 views</span>
          </div>
        </div>
      </div>

CSS

.noSelect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
  
}

.videoEmbedder {
  width: 850px;
  height: 150px;
  border-radius: 8px;
  margin: 10px auto;
  border: 1px solid #ddd;
  position: relative;
}

.videoEmbedder img {
  position: relative;
  display: inline-block;
  border-radius: 8px 0 0 8px;
  width: 200px;
  height: 150px;
  float: left;
  opacity: 0.5;
}

.videoEmbeddedVideoPlay {
  position: absolute;
  left: 80px;
  top: 55px;
  cursor: pointer;
  color: white;
  z-index: 20;
  font-size: 40px;
}

.videoEmbeddedContent {
  width: calc(100% - 220px);
  height: calc(100% - 25px);
  display: inline-block;
  padding: 10px;
  overflow: scroll;
  line-height: 1.3;
  cursor: default;
  word-break: break-word;
  font-family: sans-serif;
}

.videoTitle {
  font-size: 19px;
  font-weight: bold;
}

.videoDesc {
  font-size: 15px;
  margin-top: 10px;
}

.videoProviderDetails {
  color: grey;
  margin-bottom: 10px;
  font-size: 15px;
}

.provider {
  position: absolute;
    bottom: 5px;
    left: 211px;
    color: green;
    font-size: 15px;
}

JavaScript

$(function() {

	$(".scoreCardExpandContainer").on("click", function() {
  var chevron = $(this);
  	var elem = $(this).closest(".enquireMainlineAnswer").find(".mainContent");
    
    elem.animate({
    height: elem.scrollHeight
}, 500, function(){
    elem.height('auto');
    chevron.css({display: "none"});
});
    //alert(5);
  });
});