Question

我想在网格中动态嵌入youtube视频。然而，目前的问题是，所显示的视频缩略图没有扩展到列的大小。首先，我为响应列定义了一个包装器。然后我想创建一个具有相应大小的容器，在容器中我有元素videoId，它应该将视频缩略图拉伸到容器的大小：

</style>
    .wrapper{
    display:grid;
    grid-gap: 30px;
    grid-auto-rows: minmax(310px,auto);
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr) );
    margin-left: 30px;
} 
.wrapper > div{
    background: :#f0f0f5;
    padding: 0;
}
.video{
position: relative;
background: teal;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
}
.videoId{
    position: absolute;
    background: grey;
    width: 100%;
    height: auto;
}
</style>

HTML：

<div class="wrapper">
{%  for video in videos %}
<div class="video">
     <div class="videoId">
    <div id="player_{{video.id}}"></div>
    </div>
    {# <p>{{ video.ytbtitle }}</p>
   <p>Channel: {{ video.channelTitle }}</p>#}
        <p>Score: {{ video.star }}</p>
     </div>
{%  endfor %}
</div>

和

<script>
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var players = {};
function onYouTubeIframeAPIReady() {
    {% for video in videos %}
        players['{{video.id}}'] = new YT.Player('player_{{video.id}}', {
            height: '300',
            width: '400',
            videoId: '{{video.id}}',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    {% endfor %}
}
console.log(players);

function onPlayerStateChange(event) {
    if (event.data == 0) {  
        document.getElementById('myModal').style.display = "block";
    }
}
</script>

任何人都可以帮忙:)？我的代码的基础可以在这个网站上找到： http://alistapart.com/article/creating-intrinsic-ratios-for-video

动态嵌入YouTube视频

0 个答案: