Make video display more repsonsive (front end and admin).

Display video on day list if defined.
Restrict size of video in admin day list.
parent c539500f
.embed-container {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.manage-column.column-title {
width:10%;
max-width: 200px;
}
.manage-column.column-image,
td.column-image {
width:10%;
max-width: 300px;
}
......@@ -45,6 +45,7 @@ class Codeup_Advent_Calendar {
add_action( 'pre_get_posts', [ $this, 'sort_by_day' ] );
add_filter( 'manage_' . CAC_ADVENT_DAY_TYPE . '_posts_columns', [ $this, 'manage_posts_columns' ], 11 );
add_action( 'manage_' . CAC_ADVENT_DAY_TYPE . '_posts_custom_column', [ $this, 'manage_posts_custom_column' ], 10, 2 );
add_action( 'admin_head', [ $this, 'enqueue_assets' ] );
}
}
......@@ -88,11 +89,35 @@ class Codeup_Advent_Calendar {
?>
<img class="acd-thumbnail" src="<?php echo $image['sizes']['thumbnail']; ?>">
<?php
} else {
$video = get_field( 'acd_video', $post_id );
zed1_debug("video=", $video);
?>
<div class="embed-container">
<?php echo $video; ?>
</div>
<?php
}
break;
}
}
/**
* Enqueues some assets in the admin area.
*/
function enqueue_assets() {
if ( 'edit-' . CAC_ADVENT_DAY_TYPE !== get_current_screen()->id ) {
return;
}
wp_enqueue_style(
'advent-calendar-admin',
plugin_dir_url( __DIR__ ) . 'assets/css/advent-calendar-admin.css',
[],
filemtime( plugin_dir_path( __DIR__ ) . 'assets/css/advent-calendar-admin.css' )
);
}
/**
* Create all CAC_ADVENT_NUM_DAYS default pages. Setting the title and slug.
*/
......
/* CSS for front end advent calendar */
.calendar_day_cell {
/*width: 25%;*/
/*float: left;*/
/*border: 1px grey solid;*/
}
.advent-image {
/*max-height: 400px;*/
/*height: 400px;*/
/*max-width: 25%;*/
}
#grid {
width: 100%;
......@@ -43,6 +32,24 @@
vertical-align: middle;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
p.advent-motto,
p.advent-joke-answer,
.calendar_day_cell .day-image,
......
......@@ -17,7 +17,7 @@
<?php
} elseif ( isset( $video ) ) {
?>
<div class="day-image hidden">
<div class="day-image hidden embed-container">
<?php echo $video; ?>
</div>
<?php
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment