在…上https://www.altcinematic.co.uk/video-test/ 我使用高级自定义字段和新页面模板输入了视频标题。
页面模板:
<?php
/*
Template Name: Video Banner
*/
?>
<?php get_header(); ?>
<main class="main-content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<section class="fullscreen-intro homepage">
<?php the_field(\'video_banner\'); ?>
</section>
<section id="content">
<div class="content-section<?php if(have_rows(\'films\')){echo " padding-bottom-remove";} ?>">
<div class="white">
<div class="box-white container-box<?php if(have_rows(\'films\')){echo " margin-bottom-remove";} ?>">
<?php the_content(); ?>
</div>
</div><!-- /white -->
</div><!-- /oontent-section -->
</section><!-- /content -->
<?php if(have_rows(\'films\')):
$count = 1; ?>
<section id="content">
<div class="content-section">
<?php while(have_rows(\'films\')): the_row();
if(is_int($count / 2)){
$position = "align-left";
}
else {
$position = "align-right";
}
if($video = get_sub_field(\'is_this_a_video\') == "yes"){
$type = "video";
}
else {
$type = "other";
}
?>
<article class="yellow film-box <?php echo $position . " " . $type; ?>">
<div class="box container-box clear-fix">
<div class="box-right-top">
<div class="img video-wrap">
<div class="iframe-wrap">
<?php the_sub_field(\'vimeo_link\'); ?>
</div><!-- /iframe-wrap -->
</div><!-- /img -->
</div><!-- /box -->
<div class="box-left-top">
<h1><?php the_sub_field(\'title\'); ?></h1>
<?php the_sub_field(\'intro_text\'); ?>
</div>
</div><!-- /box -->
</article>
<?php $count++; endwhile; ?>
</div><!-- /oontent-section -->
</section><!-- /content -->
<?php endif; ?>
<?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>
这在桌面上很好用,但是我无法在平板电脑和手机上获得正确的视频位置?它位于标题和内容区域的后面,而不是它们之间,因此如果我添加边距/填充,它只会将视频移到后面。
我继承了这个网站,因此可能不完全了解这些元素是如何被控制的?
最合适的回答,由SO网友:Samuel Asor 整理而成
您可以使用css将这些设备作为目标,并专门为此进行声明。
将其添加到css文件中,并调整为合适的值:
@media screen and (max-width: 768px) {
.page-template-page-video-banner .fullscreen-intro {
margin-top: 135px !important;
}
}