Displaying your Video in a responsive way

  • Published by
    ANT
  • Last modified
    26 May 2015
  • Up to date
    Yes
  • Profile concerned
    Webdesigner
  • Concerns
    Plugins Template
  • Since Version
    beta3
  • Voting
    Average rating
    11 votes
  • Favourites

You are using the share video field and you want that your video be displayed in a responsive way. Add this CSS code to your template

/*videoyoutube dailymotion responsive
<div class="video">
*/ .video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video iframe, .video object, .video embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.entry-content img, .entry-content iframe, .entry-content object, .entry-content embed {
max-width: 100%;
}

Add in your prefixe field : 
<div class="video">

Add in your suffixe field :
</div>

Now your Video will be displayed in full width in PC, phone, tablet...