diff --git a/src/wp-content/themes/twentyseventeen/assets/images/svg-icons.svg b/src/wp-content/themes/twentyseventeen/assets/images/svg-icons.svg
index b3fc4e62cc..eb579db1a1 100644
--- a/src/wp-content/themes/twentyseventeen/assets/images/svg-icons.svg
+++ b/src/wp-content/themes/twentyseventeen/assets/images/svg-icons.svg
@@ -138,5 +138,11 @@
+
+
+
+
+
+
diff --git a/src/wp-content/themes/twentyseventeen/inc/custom-header.php b/src/wp-content/themes/twentyseventeen/inc/custom-header.php
index c137ccc41a..fbf38ed592 100644
--- a/src/wp-content/themes/twentyseventeen/inc/custom-header.php
+++ b/src/wp-content/themes/twentyseventeen/inc/custom-header.php
@@ -94,3 +94,13 @@ function twentyseventeen_header_style() {
' . __( 'Play background video', 'twentyseventeen' ) . '' . twentyseventeen_get_svg( array( 'icon' => 'play' ) );
+ $settings['l10n']['pause'] = '' . __( 'Pause background video', 'twentyseventeen' ) . '' . twentyseventeen_get_svg( array( 'icon' => 'pause' ) );
+ return $settings;
+}
+add_filter( 'header_video_settings', 'twentyseventeen_video_controls' );
diff --git a/src/wp-content/themes/twentyseventeen/rtl.css b/src/wp-content/themes/twentyseventeen/rtl.css
index 84a74601c7..059355a8a0 100644
--- a/src/wp-content/themes/twentyseventeen/rtl.css
+++ b/src/wp-content/themes/twentyseventeen/rtl.css
@@ -95,12 +95,16 @@ input[type="checkbox"] {
/* Front Page */
+.wp-custom-header-video-button {
+ left: 30px;
+ right: auto;
+}
+
.twentyseventeen-panel .recent-posts .entry-header .edit-link {
margin-left: 0;
margin-right: 1em;
}
-
/* Blog, Archive, Search */
.blog .entry-meta a.post-edit-link,
diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css
index 1610482a04..6e8e9984b1 100644
--- a/src/wp-content/themes/twentyseventeen/style.css
+++ b/src/wp-content/themes/twentyseventeen/style.css
@@ -1680,6 +1680,32 @@ body:not(.title-tagline-hidden) .site-branding-text {
transform: translateX(-50%) translateY(-50%);
}
+.wp-custom-header .wp-custom-header-video-button { /* Speficity prevents .color-dark button overrides */
+ background-color: rgba( 34, 34, 34, 0.5 );
+ border: 1px solid rgba( 255, 255, 255, 0.6 );
+ color: rgba( 255, 255, 255, 0.6 );
+ height: 45px;
+ overflow: hidden;
+ padding: 0;
+ position: fixed;
+ right: 30px;
+ top: 30px;
+ -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
+ width: 45px;
+}
+
+.wp-custom-header .wp-custom-header-video-button:hover,
+.wp-custom-header .wp-custom-header-video-button:focus { /* SSpeficity prevents .color-dark button overrides */
+ border-color: rgba( 255, 255, 255, 0.8 );
+ background-color: rgba( 34, 34, 34, 0.8 );
+ color: #fff;
+}
+
+.admin-bar .wp-custom-header-video-button {
+ top: 62px;
+}
+
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img {
bottom: 0;
position: absolute;