Выровнять видео для вставки по центру страницы - PullRequest
Новая
       3

Выровнять видео для вставки по центру страницы

0 голосов
/ 24 марта 2020

Как я могу поместить видео в центр страницы? Вот мои html 

<article data-history-node-id="6" role="article" about="/ru/node/6" class="node ml-2 mr-2 node--type-video node--promoted node--view-mode-teaser clearfix">
    <header>
        <h2 class="node__title text-center">
            <a href="#" rel="bookmark">
               <span class="field field--name-title field--type-string field--label-hidden">Test</span>
            </a>
        </h2>
    </header>
    <div class="node__content clearfix">
        <div class="field field--name-field-youtube-video field--type-video-embed-field field--label-hidden justify-content-center align-content-center field__item">
        <div class="video-embed-field-provider-youtube col-auto">
            <iframe width="340" height="220" frameborder="0" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/73zdOIulcnQ?autoplay=1&amp;start=0&amp;rel=0">
            </iframe>
        </div>
    </div>
    </div>
</article>

и некоторые CSS: 

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: 15px;
    margin-left: 15px;
}
.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
.justify-content-center {
    justify-content: center !important;
}

justify-content-center на самом деле не помогают.

Еще немного html и css здесь: https://codepen.io/lomachx/pen/GRJYNdv

1 Ответ

0 голосов
/ 24 марта 2020

Вы можете добавить класс justify-content-center в приведенный ниже div.it будет работать.

Вы должны определить правильный контейнер для этого. 

<div class="view-content row justify-content-center">...</div>


.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: 15px;
    margin-left: 15px;
}
.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
.content {
    font-size: 16px;
    font-family: 'Philosopher', sans-serif;
    font-weight: normal;
    font-style: normal;
    color: #adb5bd;
}
.node--view-mode-teaser {
    border-bottom: 1px solid #d3d7d9;
    margin-bottom: 30px;
    padding-bottom: 15px;
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}
.field--type-video-embed-field {
    max-width: 600px;
    max-height: 500px;
}
.justify-content-center {
    justify-content: center !important;
}
<header>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<header>
<div class="row row-offcanvas row-offcanvas-left clearfix">
    <main class="main-content col" id="content" role="main">
     <section class="section">
			<a id="main-content" tabindex="-1"></a>
			<div data-drupal-messages-fallback class="hidden"></div>
			<div id="block-gp-page-title" class="block block-core block-page-title-block">
				<div class="content">
					<h2 class="title text-center mt-4 mb-4">Video</h2>
				</div>
			</div>
			<div id="block-gp-content" class="block block-system block-system-main-block">
				<div class="content">
					<div class="views-element-container col-auto">
						<div class="view view-video view-id-video view-display-id-page_1 js-view-dom-id-4e20251f96bb713d45e0e3a547b7a6680520977f1b90eae104916b0a1f3e4163">
							<div class="view-content row justify-content-center">
								<div class="views-row">
									<article data-history-node-id="6" role="article" about="/ru/node/6" class="node ml-2 mr-2 node--type-video node--promoted node--view-mode-teaser clearfix">
										<header>
											<h2 class="node__title text-center">
												<a href="#" rel="bookmark">
													<span class="field field--name-title field--type-string field--label-hidden">Test</span>
												</a>
											</h2>
										</header>
										<div class="node__content clearfix">
											<div class="field field--name-field-youtube-video field--type-video-embed-field field--label-hidden justify-content-center align-content-center field__item mx-auto">
												<div class="video-embed-field-provider-youtube col-auto mx-auto">
													<iframe width="340" height="220" frameborder="0" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
												</div>
											</div>
										</div>
									</article>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
     </section>
    </main>
</div>
...