Support » Theme: Twenty Seventeen » Video settings – Twenty Seventeen Theme

  • Hi!
    I have the problem: the Twenty Seventeen theme doesn’t support the video visualization on mobile (smartphone, tablet, Iphone etc…). I have found the solution in other topics (edit theme.php) but it doesn’t work. So, my question is: “Where is the theme.php?” because i can’t found it in my wp-includes. Can you help me, please?

    Thanks

Viewing 15 replies - 1 through 15 (of 15 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    That is really bad advice, the wost advice someone can give. Never edit any (core) files found inside of ‘wp-includes’ or ‘wp-admin’.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    First set up a Child Theme: https://codex.wordpress.org/Child_Themes

    Thank you Andrew for your suggestion. I have found the info on this topic: https://wordpress.org/support/topic/youtube-video-problems-on-the-ipad-using-twentyseventeen-theme/page/2/
    So, in the Child Theme, what code do I have to write? In which file do I have to write it?
    Thanks

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Hi there – I called in my colleague Laurel to help on this. She was the the lead developer on Twenty Seventeen and I thought she would be a good person to ask, since she knows the theme, as well as the core video header functionality well.

    As a courtesy, she created a little child theme for you. Here are the two files, which you can put in a folder called twentyseventeen-child, upload to your server in the /wp-content/themes/ folder, and then activate.

    style.csshttps://gist.github.com/kathrynwp/cc72b0679760fecf014df1d173109f14
    functions.phphttps://gist.github.com/kathrynwp/a2d858153f24c20ba3bb8953021a0739

    A few caveats:

    – The video does not auto-play on mobile. This makes sure that mobile users do not eat up their bandwidth unexpectedly, and is also a general best practice on the web.
    – The video may open in a new window in some mobile browsers.

    Cheers.

    Thank you Kathryn!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    You’re very welcome.

    Hi. I use this information and thats great, but I test the web in my mobile and the video is in autoplay.
    Android Chrome.

    Any suggestion?

    Many thanks

    Thank you very much to Kathryn, Laurel of course and who asked this question. Blessings from Chile.

    zak2292

    (@zak2292)

    Hello Kathryn,
    I have found out this topic while googling about a similar issue (no video header displayed on mobile devices).
    I am using twentyseventeent theme (arabic version of Wordprerss) and the files you provided solve the issue but the styles in right to left seems been lost btw.
    I guess that the child theme inherits the styles from his father theme when activated …
    Do you have any idea
    PS: my web site is still in development stage on a local environement (centos 7, Php 7 and MariaDB 10)
    Thanks a lot !

    hi Kathryn ( @zoonini ), I got the same problem: may I use the child code you give to @scroll2804? This is my website http://www.tackleduro.com/, thank you

    • This reply was modified 10 months, 2 weeks ago by  dupply.
    • This reply was modified 10 months, 2 weeks ago by  dupply.

    Hello, I an having difficulty getting the header video to show up and play in the theme Twenty Seventeen. I have uploaded it to the header video media in the proper format and size and it appears to be placed and configured correctly. It plays perfectly if I am in Beaver Builder looking at the website but only the still header photo image is visible when not in the Beaver Builder and when viewing the website across multiple devices and browsers. I am still in the process of developing my website since I just started the other day but I would appreciate any help you could provide on getting the header video to work properly. It is hosted through WordPress via GoDaddy and the website is uplighttechnologies.com Thanks so much!

    Hi – like as with @uplighttech, I’ve uploaded my video onto videoheader, and although it shows up in Beaver builder,it doesn’t come up on the main website. Mine’s also hosted through Go Daddy. could you offer any advice??? Thanks

    Thank you

    • This reply was modified 2 months, 1 week ago by  anniebaby.

    Hi,
    I love the simplicity of Twenty Seventeen! It is perfect for my friend’s website. I am not using an image in the header area, not a video. Should be simpler, right? Not really.

    The instructions say to size the graphic to the same dimensions as the video (2000 x 1200px). It looks great in desktop mode; but the right side of the graphic is cut off on a tablet. The problem is even more pronounced on a phone. We have to view the site by holding the device in landscape mode. Initially, I sized the graphic to match the size of the featured images on the other pages. The result is the same, no matter what.

    Does this theme only work in landscape mode?

    (The site is: https://antoniodavisart.com)

    Thanks so much!

    Hi I tried the advice above and it doesn’t work. My ultimate aim is to get the video on the front page header to show in all the interior page headers. if you can suggest a way to do this that would be amazing. The code I’ve put in the child theme is not working! I’ve installed a child theme for twentyseventeen. If I choose the theme I get the message:
    “This theme is broken. Template is missing. Standalone themes need to have a index.php template file. Child themes need to have a Template header in the style.css stylesheet.”
    Additionally, when selecting the theme, instead of seeing just the title “twentyseventeen-child” in the select dropdown I see also the contents of the file displayed as follows:
    “Twenty Seventeen Child Theme Theme URI: https://bdcr.org.uk/ Description: Twenty Seventeen Child Theme Author: WordPress Author URI: http://cyberium.co.uk/ Template: twentyseventeen Description: Child theme for Twenty Seventeen. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentyseventeen-child: Stylesheet (style.css)”

    The page I need help with: https://bdcr.org.uk/

    Here are the contents of the files:
    STYLE.CSS:
    /*
    Theme Name: Twenty Seventeen Child Theme
    Theme URI: https://bdcr.org.uk/
    Description: Twenty Seventeen Child Theme
    Author: WordPress
    Author URI: http://cyberium.co.uk/
    Template: twentyseventeen
    Description: Child theme for Twenty Seventeen.
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: twentyseventeen-child
    */

    /* Make sure play/pause button can be clicked on smaller screens */
    .wp-custom-header-video-button {
    z-index: 3;
    }

    .has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe {
    height: auto;
    min-height: 100px;
    }

    .has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
    height: 60vw;
    }
    @media screen and (min-width: 48em)
    .has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
    height: 60vw;
    }

    FUNCTIONS.PHP
    <?php
    add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
    function my_theme_enqueue_styles() {

    $parent_style = ‘parent-style’; // This is ‘twentyseventeen-style’ for the Twenty seventeen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
    wp_enqueue_style( ‘child-style’,
    get_stylesheet_directory_uri() . ‘/style.css’,
    array( $parent_style ),
    wp_get_theme()->get(‘Version’)
    );
    }
    /**
    * Twenty Seventeen Child Theme functions
    *
    * @link https://developer.wordpress.org/themes/basics/theme-functions/
    *
    * @package WordPress
    * @subpackage Twenty_Seventeen
    * @since 1.0
    * Change the minimum screen size to use the video header
    */
    function twentyseventeenchild_video_size( $settings ) {
    $settings[‘minWidth’] = 100;
    $settings[‘minHeight’] = 100;
    return $settings;
    }
    add_filter( ‘header_video_settings’, ‘twentyseventeenchild_video_size’ );
    cyberium

Viewing 15 replies - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.