Problem/Motivation

It would be great in addition to configurable sizes for there to be a simple "responsive" option, where the video fills the width of it's container and scales the proportions of the video accordingly.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#4 2649318-responsive-option.patch7.41 KBSam152
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Sam152 created an issue. See original summary.

altrugon’s picture

altrugon CreditAttribution: altrugon at Affinity Bridge commented

@Sam152 try the following SASS code in the meantime, it worked for me:

.field--name-field-<fill up to match video field>{
  position:relative;

  &::after {
    content: "";
    display: block;
    padding-bottom: 56.25%;
  }

  iframe{
    bottom: 0;
    height: 100%;
    position:absolute;
    top: 0;
    width: 100%;
  }
}

Credits to: http://codepen.io/jordanoaragao/pen/WQMRxK

Sam152’s picture

Sam152 CreditAttribution: Sam152 as a volunteer and at PreviousNext commented

Thanks. That'll be a good reference for implementing this feature.

Sam152’s picture

Sam152 CreditAttribution: Sam152 as a volunteer and at PreviousNext commented
Status: Active » Needs review
FileSize
2649318-responsive-option.patch7.41 KB

I have started on this. The work left to do is to figure out how to generically target the video object/iframe/whatever and ensure it works across a variety of different field templates. Classy/core/fences for example should all display a responsive video.

Review for testbot, but this is a WIP.

Sam152’s picture

Sam152 CreditAttribution: Sam152 as a volunteer and at PreviousNext commented
Sam152’s picture

Sam152 CreditAttribution: Sam152 as a volunteer and at PreviousNext commented
Status: Needs review » Fixed

  • Sam152 committed e465b52 on 8.x-1.x 
    Issue #2649318 by Sam152, altrugon: Create an option to display...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.