-
-
Save kathrynwp/cc72b0679760fecf014df1d173109f14 to your computer and use it in GitHub Desktop.
| /* | |
| Theme Name: Twenty Seventeen Child | |
| Description: Twenty Seventeen Child Theme | |
| Author: WordPress | |
| Author URI: http://ordPress.org | |
| Template: twentyseventeen | |
| 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: twenty-seventeen-child | |
| */ | |
| /* Make sure play/pause button can be clicked on smaller screens */ | |
| .wp-custom-header-video-button { | |
| z-index: 10; | |
| } |
Hi, I've just tried this solution and have to say that although now I see the video thumbnail I can't get it to play on my mobile. I tried with two browsers: Safari and Dolphin. I see de arrow button but I don't get to play the video. Here are the screen captures I took. Note the differences between horizontal and vertical mode. Please can you help me in any way to accomplish the goal of effectively can show the video on mobiles? Thank you very much.
Hello, i had the same problem @manuamaro
I used Google Chrome inspector to change some css values to get it working for me...
I added the following at the end of the style.css file in the child theme from the link above...
.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;
}
I followed Kathryn's suggestion and did the child modifications (style.css and function.php).
I had to modify the z-index value to "2" and also set a z-index of 3 for the container, because otherwise the button was not hidden when scrolling outside the video area on a desktop monitor ("covered" by the page sections; the "content").
And on my Nokia 7 With Android 1 v8.1.0. I could see the grey area of the video..
BUT: no button at all!
I did debug and inspected with Chrome, and found out that on my mobile there was no element at all (on the desktop it is rendered into the DOM directly after the
Use this file with https://gist.github.com/kathrynwp/a2d858153f24c20ba3bb8953021a0739