问题
I'm working in a django project and i've run into an issue using embedded videos with bootstraps card-columns. We have a django plugin, Media Player, that simply puts a div & iframe on the page, most of the JS comes from the websites. The videos in question are from youtube, but i've tried vimeo videos and same result.
The issue is that some videos work fine, but others don't show up on the page, they are blank/white. However, the video is still there, it takes up space & i can hover over it and see that the Media Player plugin is there. And I can hit the middle of it, where the play button should be and even though I won't see anything I can hear the audio from the video. It's also worth noting that when the page loads, for a brief second I can see the black box of the videos loading but they immediately go white. I can also use the inspect bow in the web browser to see the video exists on the page.
I'm using boostrap with cards & the card-columns setup, column-count of 3 at XL, so 3 vertical rows of about 12 cards. And without fail, if a video is in the first vertical row, the left one, it shows up & works fine. But in the second or third row, it has the problem above. I've copy & pasted plugins, videos, cards, and moved them around and it's consistently what i've described.
Any Suggestions? I assume it's styling or css related somehow, but we can't figure it out. I'll post the code that I think is relevant and will help, as well as a screen shot demonstrating one working video and another showing up as white space, but with my house hovering over it showing the plugin is there. The 3 big white spaces in the cards are videos. I'm using a mac with chrome but others with windows have also seen this & reported it to me first. Let me know if ya'll need more code, there's just a lot of code I don't believe is related
Template that posts the iframe & video
{% load i18n cms_tags %}
<div class="embed-responsive embed-responsive-16by9"{% if instance.max_width %} style="max-width: {{ instance.max_width }}px;" {% endif %}>
<iframe class="embed-responsive-item" src="{{ instance.src }}" scrolling="no" frameborder="no" allowfullscreen></iframe>
</div>
{% if instance.caption %}
<div style="padding:5px 15px 15px 15px; background-color: white; font-size: small;">
{{ instance.caption }}
</div>
{% endif %}来源：https://stackoverflow.com/questions/61917356/embedded-youtube-videos-showing-up-blank-in-django-card-columns-page