Updated to latest code and this CSS is breaking layout everywhere, with additional padding below the videos.

.video-embed-field-responsive-video:after {
  content: '';
  display: block;
  padding-bottom: 56.25%;
}
CommentFileSizeAuthor
#7 Screen Shot 2017-02-09 at 15.09.03.png313.1 KBmbovan
#7 Screen Shot 2017-02-09 at 15.07.24.png295.67 KBmbovan
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ckng created an issue. See original summary.

Sam152’s picture

Sam152 CreditAttribution: Sam152 as a volunteer and at PreviousNext commented
Status: Active » Postponed (maintainer needs more info)

Can you provide some further details? Where is the video being used? What settings? Screenshots?

ABaier’s picture

ABaier CreditAttribution: ABaier commented

I see the exact same behavior when creating a video media bundle. The content is created by a paragraphs type using inline entity form to select the media bundle, if that's important. The css above is coming from this file: video_embed_field.responsive-video.css. For what purpose was the percentage value for the padding added?

Display settings
Format: Video
Autoplay: false
Responsive: true

Thanks in advance.

Sam152’s picture

Sam152 CreditAttribution: Sam152 as a volunteer and at PreviousNext commented

What video and provider were being used? Any way I can see a version of the page somewhere?

ABaier’s picture

ABaier CreditAttribution: ABaier commented

I tried videos from Vimeo and YouTube. It can be easily overridden with padding-bottom: 0;, just wanted to inform you, that this behavior exists. Thanks!

Sam152’s picture

Sam152 CreditAttribution: Sam152 as a volunteer and at PreviousNext commented

The padding is there for responsive videos. It's a hack to make the containers height adjust to the ratio of the width. The reason I'm asking for the extra information is because I can't reproduce the problem.

mbovan’s picture

mbovan CreditAttribution: mbovan at MD Systems GmbH commented
Component: User interface » Code
Issue summary: View changes
Status: Postponed (maintainer needs more info) » Active
FileSize
Screen Shot 2017-02-09 at 15.07.24.png295.67 KB
Screen Shot 2017-02-09 at 15.09.03.png313.1 KB

Hi! I'm having an issue with image overlaps by a responsive video.

Setup:
Drupal Core: 8.2.6
Video Embed Field commit hash: 418b6e9e35949a9d0c3ccbf1f76c0fe7b2c4ddb9

Steps to reproduce:

  1. Create an image field on a node type
  2. Create a video embed on a node type
  3. Enable "Responsive Video" setting in display configuration for the video embed field
  4. Make sure video embed field follows image field in the display order.
  5. Create a new node, add an image and a youtube video URL.
  6. Save the node.
  7. As a result, the Youtube video hides the image:

Expected output:

mbovan’s picture

mbovan CreditAttribution: mbovan at MD Systems GmbH commented
Component: Code » Video Embed Field (base module)
Sam152’s picture

Sam152 CreditAttribution: Sam152 as a volunteer and at PreviousNext commented

Does the video container just need to clear the float?

Sam152’s picture

Sam152 CreditAttribution: Sam152 as a volunteer and at PreviousNext commented
Status: Active » Closed (won't fix)

With the advent of Media in core, the Video Embed Field module has moved to being minimally maintained. Only issues which assist in the migration to Media in core will be committed. To read more about this decision, please see: #3089599: Maintenance status for Video Embed Field now that media is in core.