ワードプレスでSWITCHのテーマでサイトを作っているのですが、PC用ではトップは動画で、スマホでは画像が表示されるようになっています。これをスマホでも動画で見れるようにしたいのですがどうしたらいいでしょうか。
試したこと
.p-header-videoの部分のbackground-image:url()を消してみましたが、動画が表示されません。
display:noneも探してみましたが、見つからずでした。
わかる方がいれば教えて下さい。
https://demo.tcd-theme.com/tcd063/
php
1<?php $dp_options = get_design_plus_options(); ?> 2 3<?php if ( 'type1' === $dp_options['header_content_type'] ) : // Image ?> 4<div id="js-header-slider" class="p-header-slider" data-speed="<?php echo esc_attr( $dp_options['header_slider_animation_time'] * 1000 ); ?>"> 5 6 <?php 7 for ( $i = 1; $i <= 5; $i++ ) : 8 if ( ! $dp_options['header_slider_img' . $i] ) continue; 9 ?> 10 <div class="p-header-slider__item p-header-slider__item--<?php echo esc_attr( $i ); ?> p-header-content"> 11 <div class="p-header-content__inner"> 12 <div class="p-header-content__title<?php if ( 'type1' === $dp_options['header_slider_catch_writing_mode' . $i] ) { echo ' p-header-content__title--vertical'; } ?>"> 13 <span><?php echo nl2br( esc_html( $dp_options['header_slider_catch' . $i] ) ); ?></span> 14 </div> 15 </div> 16 <div class="p-header-slider__item-img p-header-slider__item-img--<?php echo esc_attr( $dp_options['header_slider_img_animation_type' . $i] ); ?>" data-animation="<?php if ( 'type3' !== $dp_options['header_slider_img_animation_type' . $i] ) { echo '1'; } ?>"></div> 17 </div> 18 <?php endfor; ?> 19 20</div> 21 22<?php elseif ( 'type2' === $dp_options['header_content_type'] ) : // Video ?> 23<div id="js-header-video" class="p-header-video p-header-content is-active"> 24 25 <?php if ( ! wp_is_mobile() ) : ?> 26 <video autoplay loop muted> 27 <source src="<?php echo esc_attr( wp_get_attachment_url( $dp_options['header_video'] ) ); ?>"> 28 </video> 29 <?php endif; ?> 30 31 <div class="p-header-content__inner"> 32 <div class="p-header-content__title<?php if ( 'type1' === $dp_options['header_video_catch_writing_mode'] ) { echo ' p-header-content__title--vertical'; } ?>"> 33 <span><?php echo nl2br( esc_html( $dp_options['header_video_catch'] ) ); ?></span> 34 </div> 35 </div> 36</div> 37 38<?php elseif ( 'type3' === $dp_options['header_content_type'] ) : // YouTube ?> 39<div id="js-header-youtube" class="p-header-youtube p-header-content is-active"> 40 41 <?php if ( ! wp_is_mobile() ) : ?> 42 <div id="js-header-youtube__player" class="p-header-youtube__player" data-video-id="<?php echo esc_attr( $dp_options['header_youtube_id'] ); ?>"></div> 43 <?php endif; ?> 44 45 <div class="p-header-content__inner"> 46 <div class="p-header-content__title<?php if ( 'type1' === $dp_options['header_youtube_catch_writing_mode'] ) { echo ' p-header-content__title--vertical'; } ?>"> 47 <span><?php echo nl2br( esc_html( $dp_options['header_youtube_catch'] ) ); ?></span> 48 </div> 49 </div> 50</div> 51<?php endif; ?>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。