我一直在尝试让我的 amp 故事播放器居中，以便在播放故事时用户能够看到故事的自动前进，同时能够暂停和播放故事。我现在的困难是，当我尝试查看任何故事时，播放器前进栏和播放器控件隐藏在导航栏后面，除非我在看到播放器控件之前缩小到 80%，但如果缩放为 100% ，自动前进栏和播放器控件隐藏在导航栏后面我该如何解决这个问题？我曾尝试减小播放器的高度和宽度，但没有奏效，我将不胜感激有关解决此问题的任何建议。
AMP player html
<head>
<style amp-custom>
amp-story {
font-family: 'Oswald',sans-serif;
color: #fff;
}
amp-story-page {
background-color: #000;
}
h1 {
font-weight: bold;
font-size: 2.875em;
font-weight: normal;
line-height: 1.174;
}
p {
font-weight: normal;
font-size: 1.3em;
line-height: 1.5em;
color: #fff;
}
q {
font-weight: 300;
font-size: 1.1em;
}
amp-story-grid-layer.bottom {
align-content:end;
}
amp-story-grid-layer.noedge {
padding: 0px;
}
amp-story-grid-layer.center-text {
align-content: center;
}
.wrapper {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
}
.banner-text {
text-align: center;
background-color: #000;
line-height: 2em;
}
</style>
</head>
<div class="main_content lg:mr-20">
<div class="mcontainer">
<!-- feed -->
<div class="lg:flex lg:space-x-10">
<div class="lg:w-1/2 space-y-7">
<!-- Cover page -->
<amp-story standalone
title="Joy of Pets"
publisher="AMP tutorials"
publisher-logo-src="{% static 'images/logo' %}"
poster-portrait-src="{{object.images.first.url}}" live-story>
<!-- Page 1 (Cat): 1 layer (vertical) -->
{% for object in object.storyimage_set.all %}
<amp-story-page id="page" auto-advance-after="5s" >
<amp-story-grid-layer template="fill">
<amp-story-grid-layer >
<amp-img img async src="{{object.images.url}}" width="780" height="1200" loading="lazy" data-amp-story-player-poster-img>
<amp-story-grid-layer template="vertical">
<p>{{t.title}}</p>
<amp-story-grid-layer template="vertical" class="bottom">
<p> </p>
</amp-story-grid-layer>
</amp-story-grid-layer>
</amp-story-grid-layer>
</amp-story-page>
{% if object.video %}
<amp-story-page id="9" auto-advance-after="5s">
<amp-story-grid-layer template="fill">
<amp-video video autoplay
width="780" height="1200"
loading="lazy"
poster="{{object.image.url}}"
layout="responsive" cache="google">
<source src="{% static object.video.url %}" type="video/mp4">
</amp-video>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1> </h1>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical" class="bottom">
<p> </p>
</amp-story-grid-layer>
</amp-story-page>
{% endif %}
{% endfor %}
<!-- Bookend -->
<amp-story-bookend src="{% static 'css/bookend.json' %}" layout="nodisplay"></amp-story-bookend>
</amp-story>
</div>
</div>
</div>
</div>
