- This topic has 17 replies, 3 voices, and was last updated 7 years, 10 months ago by Tom.
-
AuthorPosts
-
May 29, 2016 at 1:17 pm #197737Dennis
Hi Tom,
I’m wondering if you can add FitVids.js to GeneratePress, so that embedded youtube and vimeo videos are responsive on mobile devices when using iframe/embed code. At the moment videos don’t look great on mobile or tables as they are long and rectagular.
If you are unable to add this, can you tell me how I can add it to a child theme so videos are responsive.
Thanks
May 30, 2016 at 12:14 am #197841TomLead DeveloperLead DeveloperIt 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>
- This reply was modified 7 years, 10 months ago by Tom.
June 1, 2016 at 1:42 pm #198681DennisGreat. Thanks Tom
June 1, 2016 at 2:23 pm #198696TomLead DeveloperLead DeveloperYou’re welcome 🙂
June 8, 2016 at 5:17 am #200255jordiHello 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
June 8, 2016 at 10:41 am #200315TomLead DeveloperLead DeveloperThis 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>
June 8, 2016 at 11:52 am #200343jordiHi 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
June 8, 2016 at 12:30 pm #200351jordiHello 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
June 8, 2016 at 12:39 pm #200355TomLead DeveloperLead DeveloperThat’s correct.
No need to execute PHP with that code 🙂
June 8, 2016 at 1:33 pm #200368jordiHello 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 FinderJune 9, 2016 at 12:27 am #200427TomLead DeveloperLead DeveloperHmm, 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?
June 9, 2016 at 3:50 am #200478jordiHello 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 1100×400, 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.htmlImage post in category
http://www102.zippyshare.com/v/9NMWScZj/file.htmlChange font size in category
http://www71.zippyshare.com/v/QtGN3pub/file.htmlJune 9, 2016 at 11:59 pm #200666TomLead DeveloperLead DeveloperYou 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; }
June 10, 2016 at 5:17 am #200759jordi`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
June 10, 2016 at 11:49 pm #200991TomLead DeveloperLead DeveloperThose 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.
-
AuthorPosts
- You must be logged in to reply to this topic.