This is an automated email from the ASF dual-hosted git repository.
xushiyan pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/hudi.git
The following commit(s) were added to refs/heads/asf-site by this push:
new 91293c089d45 chore(site): embed cmu hudi talk video (#14072)
91293c089d45 is described below
commit 91293c089d4513f105f923160362bd116a8c20c2
Author: Shiyan Xu <[email protected]>
AuthorDate: Fri Oct 10 01:24:12 2025 -0500
chore(site): embed cmu hudi talk video (#14072)
Embed https://www.youtube.com/watch?v=AYaw06_Xazo at homepage
as per guide here
https://privacy.apache.org/examples/youtube-html/with-youtube-api.html
---
.../images/homepage_video_placeholder.png | Bin 0 -> 1789566 bytes
website/src/components/HomepageHeader/index.js | 37 +++++++++++++++++----
.../components/HomepageHeader/styles.module.css | 36 ++++++++++++++++++++
3 files changed, 67 insertions(+), 6 deletions(-)
diff --git
a/website/src/components/HomepageHeader/images/homepage_video_placeholder.png
b/website/src/components/HomepageHeader/images/homepage_video_placeholder.png
new file mode 100644
index 000000000000..87852ef2efe2
Binary files /dev/null and
b/website/src/components/HomepageHeader/images/homepage_video_placeholder.png
differ
diff --git a/website/src/components/HomepageHeader/index.js
b/website/src/components/HomepageHeader/index.js
index b26d6f9537ce..3a1ffe58dd87 100644
--- a/website/src/components/HomepageHeader/index.js
+++ b/website/src/components/HomepageHeader/index.js
@@ -5,6 +5,34 @@ import styles from "./styles.module.css";
import LinkButton from "@site/src/components/UI/LinkButton";
import FeatureRender from "./FeatureRender";
+function loadScript() {
+ return new Promise((resolve, reject) => {
+ let script = document.createElement('script');
+ script.src = 'https://www.youtube.com/iframe_api';
+ script.addEventListener('load', resolve);
+ script.addEventListener('error', (e) => reject(e));
+ document.body.appendChild(script);
+ });
+}
+
+function addElement() {
+ loadScript().then(() => {
+ window.YT.ready(function() {
+ let player = new YT.Player(styles.ytContainer, {
+ videoId: 'AYaw06_Xazo',
+ playerVars: {
+ 'playsinline': 1
+ },
+ events: {
+ 'onReady': (event) => {
+ event.target.playVideo();
+ }
+ }
+ });
+ });
+ });
+}
+
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
const [firstHalf, secondHaf] = siteConfig.title.split(" ");
@@ -27,12 +55,9 @@ function HomepageHeader() {
</LinkButton>
</div>
</div>
- <div className={styles.imageWrapper}>
- <img
- className={clsx("hero__img", styles.heroImg)}
- src={require("/assets/images/logo-big.png").default}
- alt="Hudi banner"
- />
+ <div className={styles.videoWrapper}>
+ <div id={styles.ytContainer} onClick={addElement}></div>
+ <div>Clicking on this link will load and send data from and to
Google.</div>
</div>
</div>
</div>
diff --git a/website/src/components/HomepageHeader/styles.module.css
b/website/src/components/HomepageHeader/styles.module.css
index 2ef324076bb1..de004162e5d3 100644
--- a/website/src/components/HomepageHeader/styles.module.css
+++ b/website/src/components/HomepageHeader/styles.module.css
@@ -28,6 +28,24 @@
width: 50%;
}
+.videoWrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: right;
+ justify-content: center;
+}
+
+#ytContainer {
+ display: flex;
+ text-align: right;
+ align-items: right;
+ justify-content: center;
+ background-image: url('images/homepage_video_placeholder.png');
+ background-size: cover;
+ width: 560px;
+ height: 315px;
+}
+
.leftContent {
width: 50%;
}
@@ -58,6 +76,24 @@
justify-content: center;
}
+ .videoWrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ #ytContainer {
+ display: flex;
+ text-align: center;
+ align-items: center;
+ justify-content: center;
+ background-image: url('images/homepage_video_placeholder.png');
+ background-size: cover;
+ width: 560px;
+ height: 315px;
+ }
+
.leftContent {
width: 100%;
display: flex;
