Support › Forums › Flex Theme › YouTube thumbnail › Reply To: YouTube thumbnail
In newer WordPress version embed setting was removed from Dashboard. Ideally, it is controlled by WordPress settings. However, since setting has been removed there are few ways to achieve this:
1. Define width and height of embed content. Add following code at bottom of functions.php file
add_filter( 'embed_defaults', 'bigger_embed_size' );
function bigger_embed_size() {
return array( 'width' => 700, 'height' => 394 );
}
This method has one limitation: in mobile view videos will appear taller.
2. Best way is using CSS class wrapper. Add following to style.css file before media queries
.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%;
}
and use following code format to embed youtube video code in the post
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
This will display videos in proportional dimensions both on desktop and mobile. Limitation of this method: extra css code while embedding videos. (refer – https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php )
3. Use fitvids plugin or jquery method as shared here
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php