Add FitVids to GeneratePress for responsive videos

It should be quite easy to add if you have a child theme.

First, upload jquery.fitvids.js into your child theme.

Then add this as a function:

add_action( 'wp_enqueue_scripts', 'generate_fitvids' );
function generate_fitvids() 
{
    wp_enqueue_script( 'fitvids', get_stylesheet_directory_uri() . "/jquery.fitvids.js", array( 'jquery' ), '1.0', true );
}

Then you could add this into the wp_footer hook in GP Hooks:

<script>
  jQuery(document).ready(function($){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

Great. Thanks Tom

You're welcome :)

Hello Tom
1 jquery.fitvids.js want to upload the plugin on the main theme for the videos have correct proportions, I went to https://github.com/davatron5000/FitVids.js page to download the plugin but can not find,

2 file
add_action ( '', 'wp_enqueue_scripts generate_fitvids');
generate_fitvids function ()
{
     wp_enqueue_script ('' fitvids get_stylesheet_directory_uri () "," /jquery.fitvids.js array ( 'jquery'), '1.0' is true.);
}

you have to upload it to generate press functions.php?

I take hours and do not fix it, thanks for your tremendous help

Jordi

This is the file you want to save: https://raw.githubusercontent.com/davatron5000/FitVids.js/master/jquery.fitvids.js

Then upload it to your child theme.

Add this function to the functions.php file in your child theme:

add_action( 'wp_enqueue_scripts', 'generate_fitvids' );
function generate_fitvids() 
{
    wp_enqueue_script( 'fitvids', get_stylesheet_directory_uri() . "/jquery.fitvids.js", array( 'jquery' ), '1.0', true );
}

This assumes you uploaded the file as jquery.fitvids.js and uploaded it to the root directory of your child theme.

Then add this in the wp_footer link in GP Hooks:

<script>
  jQuery(document).ready(function($){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

Hi Tom, for I have made changes directly in the main thema and has not worked for me, now also on the menu created with max mega menu submenus are not

I do not have child theme, as I create a child theme?

as anulo the wp_footer?

Thank you

Hello again Tom,

I have restored all that was done in the parent topic, I download in this forum the child theme that only has a file named style, the function file and a screenshot, is that correct?

another thing, when I think the hat wp_footer check the box Execute php ??

Thank you

That's correct.

No need to execute PHP with that code :)

Hello again Tom

first thank you for the patience you have to answer all questions

We will improve the look of the web,

Attached two images

http://www90.zippyshare.com/v/9RB24qoA/file.html

http://www103.zippyshare.com/v/sti523eL/file.html

post image in category is shown as the video image, that image is provided but it is that image in the post is very small, image post direct, do not know if this can be arranged a little more.

on the other hand the title of the post if you change the zoom ratio according to the browser, you can not do the same cos titles that do not change in size?

Finally, in the post in category image, seen above the title of the category, where I can change the color, size and font? already that the titles of the post is in H2 but can not find for the title of the categories.

Thank you

Jordi
Traductor de Google para empresas:Google Translator ToolkitTraductor de sitios webGlobal Market Finder

Hmm, I'm afraid I'm not sure what you mean - maybe you can add arrows to the elements you're trying to tweak? Or do you have any example of a site doing something similar to what you're trying to achieve?

Hello Tom,

My English is not very good, I will try to explain with the help of images

I want to resize the title of the category, attached image

in the post (image post) the video dimensions are 1100x400, with these dimensions is the video (image post in category), if I change the dimensions in the post to make the video look bigger then the category the video looks disproportionate, my question is, if you can set a size for the video in the post and a size for the video in the category independently.

a million thanks

Jordi

Image post
http://www74.zippyshare.com/v/kfHesjo1/file.html

Image post in category
http://www102.zippyshare.com/v/9NMWScZj/file.html

Change font size in category
http://www71.zippyshare.com/v/QtGN3pub/file.html

You could embed two separate videos at different sizes.

Wrap them in two different divs:

<div class="single-video">
    Video HTML for single post
</div>
<div class="category-video">
    Video HTML for category post
</div>

Then add this CSS:

.single .category-video {
    display: none;
}

body:not(.single) .single-video {
    display: none;
}

As for the category title font size, this is the CSS you need:

.page-header h1 {
    font-size: 25px;
}

`Hello Tom,
Thanks for the reply
sorry for ask a new question,

Here, change "single-video" for the title of the post ??

Here, "category-video" must be changed for the title of the category?

I put the CSS in the CSS style parent theme or topic or CSS Style child theme

Thank you

Those classes stay the same, you put your youtube code inside each element:

<div class="single-video">
    Video HTML for single post
</div>
<div class="category-video">
    Video HTML for category post
</div>

That's what you add inside the post - two videos, one for the single post and one for the category view.

Then you add your CSS:

.single .category-video {
    display: none;
}

body:not(.single) .single-video {
    display: none;
}

That's what will make the above HTML work - no need to change any classes, just add the videos inside those elements.