Located at the bottom of this webpage is a media gallery. The initial three images comprise the photo gallery, followed by video thumbnails inlined afterwards. However, there seems to be an issue with the alignment of each element within the video gallery. Can you provide assistance?
Below is the HTML code for each video thumbnail:
<?php if((get_post_meta($post->ID, 'url_video3', true))) { ?>
<div class="video_container">
<a href="#TB_inline?inlineId=url_video3&width=600&height=400" class="thickbox video">
<?php $attachment_id = get_field('icona_video3'); echo wp_get_attachment_image( $attachment_id, icona); ?>
<div class="play-icona"><img src="<?php bloginfo('template_url'); ?>/images/video_link.png" /></div>
</a>
</div>
<?php } ?>
Additionally, here is the corresponding CSS code:
.thickbox.video {
text-decoration: none !important;
width: 96px !important;
height: 96px !important;
}
.video_container {
position: relative;
display: inline-block;
height: 96px !important;
width: 96px !important;
margin: 0 !important;
padding: 0 !important;
}
.play-icona {
position:absolute;
left:35%;
top:35%;
}