• Home
  • Blog
  • Showcase
  • Setup Docs
    • Sunshine Help
    • Flex Help
  • Support
    • Support Area
    • Contact us
    • Feedback
  • Connect
    • Newsletter
    • Twitter
    • Facebook
  • My Account
  • Flex
  • Sunshine
Support : Simple Pro Themes

Support : Simple Pro Themes

Reply To: YouTube thumbnail

If you have purchased a product, please enter the email address that you used to register at time of purchase.
Log In
Lost Password

Create an Account
  • Your username must be unique, and cannot be changed later.
  • We use your email address to email you a secure password and verify your account.

Support › Forums › Flex Theme › YouTube thumbnail › Reply To: YouTube thumbnail

January 9, 2016 at 3:51 am #776
Davinder Singh Kanith
Moderator

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

Copyright © 2021 · Simple PRO Themes for Genesis Framework · About · FAQs · Contact · Affiliates