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

Display video on day list if defined.
Restrict size of video in admin day list.

assets/css/advent-calendar-admin.css

+.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;
+}

inc/class-codeup-advent-calendar.php

@@ -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.
 	 */

templates/assets/css/advent-calendar.css

 /* 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,

templates/content-advent_day.php

@@ -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