古德堡编辑器插入youtube视频,居中显示Css代码
问题:古德堡编辑器插入youtube视频,编辑器中设置居中,放大显示。前端显示无法居中对齐,视频很小。
解决方案: 在主题style.css中添加youtube元素样式
/* youtube video start 视频样式*/
.wp-block-embed-youtube {
max-width: 716px;
margin: 0 auto;
}
.wp-block-embed-youtube .wp-block-embed__wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 宽高比 */
height: 0;
overflow: hidden;
}
.wp-block-embed-youtube iframe {
position: absolute!important;
top: 0!important;
left:50%!important;
width: 716px!important;
height: 100%!important;
transform: translateX(-50%)!important;
}
/* youtube video end 视频样式*/
@media all and (max-width:768px) {
/* youtube video start 视频样式*/
.wp-block-embed-youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* youtube video end 视频样式*/