Docs

[drplasticine]

Hi, I have attached an image. It is an example of how YouTube videos appear on my blog post on the mobile version of my website. This is my question, is there anything I can do to make the video thumbnails display more like they do on a desktop? The video thumbnail appears squished. Thanks for your help.

Morgan

My website: MorganGanem.com

[drplasticine]

Image

[drplasticine]

[drplasticine]

Sorry for the multiple posts. The image would not link.

[John Ezra]

Hi there,

Thanks for writing in and sorry you are experiencing the issue. Would you mind pointing us to the exact location of the issue. We checked your videos page and thumbnails looked fine on desktop and mobile. The videos resize automatically.

Hope this helps – thanks!

[drplasticine]

Hi, thank you for your response. The place where the thumbnails are not showing up correctly are specifically on my blog pages.

Here is an example: http://morganganem.com/myrunvideo/

Thank you.

[John Ezra]

Hi there,

Thanks for updating the thread! This is because the embed code is none responsive. Try the following workaround:

Enclose your YouTube Embed code within this structure:

<div class="videoWrapper">
    <!-- Copy & Paste embed code from YouTube Here-->
</div>

It should look like this:

<div class="videoWrapper">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/kjK5kdP88CA" frameborder="0" allowfullscreen></iframe>
</div>

Then you need to add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Hope this helps – thanks!

[drplasticine]

That worked! Thanks very much for your help 🙂

[Prasant Rai]

You are most welcome 🙂 .

[Author]

Posts