javascriptcsswordpressyoutubevideo-thumbnails

Youtube Thumbnail and actual video CSS fix (WordPress)

Please check https://form.obzservices.com

You will see a first video on the right hand side after header. It's showing the thumbnail down (Hating that) but when you play it goes to its actual place where I want it to be.

I'm on Wordpress. Anyone can help to fix this please?

Thanks!

Solution

  • Please update CSS as described below: Replace this

    .wpb_video_widget .wpb_video_wrapper {
padding-top: 56.25%;
position: relative;
width: 100%;
}

    With this

    .wpb_video_widget .wpb_video_wrapper {
padding-top: 0px !important;
position: relative;
width: 100%;
}

    Replace this

    .wpb_video_widget .wpb_wrapper iframe {
width: 100%;
height: 100%;
display: block;
position: absolute;
margin: 0;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

    With this

    .wpb_video_widget .wpb_wrapper iframe {
width: 100%;
height: 326px;
display: block;
position: relative;
margin: 0;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}