古德堡编辑器插入youtube视频,居中显示Css代码

古德堡编辑器插入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 视频样式*/
Comments are closed.