Skip to content

Commit db4b89c

Browse files
mosesrothmosesroth
committed
Convert videos page to embedded YouTube players with vertical layout
1 parent d0d1c75 commit db4b89c

2 files changed

Lines changed: 42 additions & 48 deletions

File tree

‎style.css‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -168,10 +168,19 @@ h2 {
168168
border: 1px solid #eee;
169169
border-radius: 8px;
170170
transition: box-shadow 0.2s;
171+
display: block;
172+
}
173+
174+
.video-container {
171175
display: flex;
172-
flex-direction: row;
173-
align-items: flex-start;
174-
gap: 1rem;
176+
flex-direction: column;
177+
}
178+
179+
.video-container iframe {
180+
width: 100%;
181+
max-width: 560px;
182+
height: 315px;
183+
margin-bottom: 1rem;
175184
}
176185

177186
.content-item:hover {

‎videos.html‎

Lines changed: 30 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -26,135 +26,120 @@ <h2>Videos</h2>
2626
<section>
2727
<div class="content-grid">
2828
<article class="content-item">
29-
<img src="apphealthvideo.jpg" alt="App Health Dashboard" class="thumbnail">
30-
<div class="content-text">
31-
<h3><a href="https://www.youtube.com/watch?v=d9LLNLhY7RI" target="_blank">App Health Insights Dashboard</a></h3>
29+
<div class="video-container">
30+
<iframe width="560" height="315" src="https://www.youtube.com/embed/d9LLNLhY7RI?si=3KkV8TR16mjjDdQn" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
3231
<p class="date">March 13, 2025</p>
3332
<p>With the App Health Insights dashboard, you can track key app performance and stability metrics across all live versions of an app. These metrics can help you monitor any ongoing issues, track potential regressions across newer app versions, and continuously improve your app's user experience.</p>
3433
</div>
3534
</article>
3635

3736
<article class="content-item">
38-
<img src="2024video.webp" alt="2024 Year in Review" class="thumbnail">
39-
<div class="content-text">
40-
<h3><a href="https://www.youtube.com/watch?v=FLKkY3PDhDA" target="_blank">2024 year in review for Amazon Apps and Devices</a></h3>
37+
<div class="video-container">
38+
<iframe width="560" height="315" src="https://www.youtube.com/embed/FLKkY3PDhDA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
4139
<p class="date">December 18, 2024</p>
4240
<p>As 2024 comes to a close, we're taking a moment to reflect on the many achievements of our developer community. Your creativity and input have guided us to build better tools, foster collaboration, and address the challenges that matter most to you this year.</p>
4341
</div>
4442
</article>
4543

4644
<article class="content-item">
47-
<img src="retentionvideo.webp" alt="Retention Offers" class="thumbnail">
48-
<div class="content-text">
49-
<h3><a href="https://www.youtube.com/watch?v=zDl_GT-gEMU" target="_blank">Retention Offers for Subscription IAP</a></h3>
45+
<div class="video-container">
46+
<iframe width="560" height="315" src="https://www.youtube.com/embed/zDl_GT-gEMU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
5047
<p class="date">August 26, 2024</p>
5148
<p>In this video tutorial, Developer Evangelist Moses Roth will show you how to submit retention offers for your subscription IAP. Retention offers allow you to offer discounts to customers who subscribe to your app and are considering canceling their subscription.</p>
5249
</div>
5350
</article>
5451

5552
<article class="content-item">
56-
<img src="liveapptestvideo.webp" alt="Live App Testing" class="thumbnail">
57-
<div class="content-text">
58-
<h3><a href="https://www.youtube.com/watch?v=Qlezq8N0y9g" target="_blank">Live App Testing for the Amazon Appstore</a></h3>
53+
<div class="video-container">
54+
<iframe width="560" height="315" src="https://www.youtube.com/embed/Qlezq8N0y9g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
5955
<p class="date">October 13, 2023</p>
6056
<p>A video tutorial about how the all new, fully update Live App Testing experience for the Amazon Appstore. This video includes information about how to create a new Live App Test, manage testers, download the test, and promote it to production.</p>
6157
</div>
6258
</article>
6359

6460
<article class="content-item">
65-
<img src="submittingvideo.webp" alt="Submitting Apps" class="thumbnail">
66-
<div class="content-text">
67-
<h3><a href="https://www.youtube.com/watch?v=-8Bmp01Z6T8" target="_blank">Submitting Apps for the Amazon Appstore</a></h3>
61+
<div class="video-container">
62+
<iframe width="560" height="315" src="https://www.youtube.com/embed/-8Bmp01Z6T8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
6863
<p class="date">October 5, 2023</p>
6964
<p>A video tutorial about how to submit apps to Amazon Appstore, with the new updated app submission experience. This video includes information about porting apps, uploading files, targeting devices, and filling out app details.</p>
7065
</div>
7166
</article>
7267

7368
<article class="content-item">
74-
<img src="privacyvideo.jpg" alt="Privacy Labels" class="thumbnail">
75-
<div class="content-text">
76-
<h3><a href="https://www.youtube.com/watch?v=f3MUBZoOeG0" target="_blank">Amazon Appstore Privacy Labels</a></h3>
69+
<div class="video-container">
70+
<iframe width="560" height="315" src="https://www.youtube.com/embed/f3MUBZoOeG0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
7771
<p class="date">April 11, 2023</p>
7872
<p>In this video tutorial, Developer Advocate Moses Roth, will show you how to submit privacy labels. Privacy labels provide your customers with a way to view information about how your apps handle user data.</p>
7973
</div>
8074
</article>
8175

8276
<article class="content-item">
83-
<img src="smallbusinessvideo.webp" alt="Small Business AWS" class="thumbnail">
84-
<div class="content-text">
85-
<h3><a href="https://www.youtube.com/watch?v=72Wx_8QI5jk" target="_blank">How to add AWS account for Small Business Accelerator Program credits</a></h3>
77+
<div class="video-container">
78+
<iframe width="560" height="315" src="https://www.youtube.com/embed/72Wx_8QI5jk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
8679
<p class="date">November 18, 2022</p>
8780
<p>In this video tutorial, Developer Advocate Moses Roth will explain how to set up your AWS account in the Amazon Developer Console. Developers eligible for the Small Business Accelerator Program benefits must follow these steps to receive their promotional AWS credits.</p>
8881
</div>
8982
</article>
9083

9184
<article class="content-item">
92-
<img src="invitevideo.jpg" alt="Invite Users" class="thumbnail">
93-
<div class="content-text">
94-
<h3><a href="https://www.youtube.com/watch?v=tTIPjLgF_SU" target="_blank">How to Invite New Users to Amazon Developer Account</a></h3>
85+
<div class="video-container">
86+
<iframe width="560" height="315" src="https://www.youtube.com/embed/tTIPjLgF_SU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
9587
<p class="date">May 17, 2021</p>
9688
<p>In this Tutorial, Amazon Developer Advocate Moses Roth will explain how you can easily add new users to your Amazon Developer Account and how you can set specific user permission based on your team needs.</p>
9789
</div>
9890
</article>
9991

10092
<article class="content-item">
101-
<img src="submitoldvideo.jpg" alt="Submit App" class="thumbnail">
102-
<div class="content-text">
103-
<h3><a href="https://www.youtube.com/watch?v=m_tRGoLwLHg" target="_blank">How to Submit an App to Amazon Appstore</a></h3>
93+
<div class="video-container">
94+
<iframe width="560" height="315" src="https://www.youtube.com/embed/m_tRGoLwLHg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
10495
<p class="date">September 6, 2021</p>
10596
<p>In this video tutorial Developer Advocate Moses Roth with explain how you can easily submit your Apps and Games to the Amazon Appstore.</p>
10697
</div>
10798
</article>
10899

109100
<article class="content-item">
110-
<img src="paidvideo.jpg" alt="Get Paid" class="thumbnail">
111-
<div class="content-text">
112-
<h3><a href="https://www.youtube.com/watch?v=8P61xMuC7cA" target="_blank">How to Get Paid on Amazon Appstore</a></h3>
101+
<div class="video-container">
102+
<iframe width="560" height="315" src="https://www.youtube.com/embed/8P61xMuC7cA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
113103
<p class="date">August 20, 2021</p>
114104
<p>In this short video, Developer Advocate Moses Roth explains what are the key monetization models for apps on Amazon Appstore and how developers can set up their accounts to receive payments from Amazon for their apps' sales.</p>
115105
</div>
116106
</article>
117107

118108
<article class="content-item">
119-
<img src="reportingvideo.jpg" alt="Reporting Overview" class="thumbnail">
120-
<div class="content-text">
121-
<h3><a href="https://www.youtube.com/watch?v=wVhsg_6Lvx4" target="_blank">Reporting Overview on Amazon Appstore</a></h3>
109+
<div class="video-container">
110+
<iframe width="560" height="315" src="https://www.youtube.com/embed/wVhsg_6Lvx4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
122111
<p class="date">July 7, 2021</p>
123112
<p>In this short video Developer Advocate Moses Roth will share how to access Sales Reports, and Earnings and Payments Reports on the Amazon Appstore developer dashboard.</p>
124113
</div>
125114
</article>
126115

127116
<article class="content-item">
128-
<img src="updatevideo.jpg" alt="Update App" class="thumbnail">
129-
<div class="content-text">
130-
<h3><a href="https://www.youtube.com/watch?v=SZvVfHA6egA" target="_blank">How to Update an App on Amazon Appstore</a></h3>
117+
<div class="video-container">
118+
<iframe width="560" height="315" src="https://www.youtube.com/embed/SZvVfHA6egA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
131119
<p class="date">June 17, 2021</p>
132120
<p>In this tutorial Developer Advocate Moses Roth will explain how you can easily update your apps on the Amazon Appstore using the Developer Dashboard.</p>
133121
</div>
134122
</article>
135123

136124
<article class="content-item">
137-
<img src="gamertheory.jpg" alt="Gamer Theory" class="thumbnail">
138-
<div class="content-text">
139-
<h3><a href="https://www.youtube.com/watch?v=URsm_3KmvEA" target="_blank">Gamer Theory (feature film)</a></h3>
125+
<div class="video-container">
126+
<iframe width="560" height="315" src="https://www.youtube.com/embed/URsm_3KmvEA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
140127
<p class="date">August 13, 2013</p>
141128
<p>All's fair in love and games. A romantic comedy about gamers.</p>
142129
</div>
143130
</article>
144131

145132
<article class="content-item">
146-
<img src="teaser.jpg" alt="Gamer Theory Teaser" class="thumbnail">
147-
<div class="content-text">
148-
<h3><a href="https://www.youtube.com/watch?v=gV2cgtAp-7Y" target="_blank">Gamer Theory Teaser Trailer</a></h3>
133+
<div class="video-container">
134+
<iframe width="560" height="315" src="https://www.youtube.com/embed/gV2cgtAp-7Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
149135
<p class="date">June 21, 2013</p>
150136
<p>Teaser trailer for the independent comedy "Gamer Theory".</p>
151137
</div>
152138
</article>
153139

154140
<article class="content-item">
155-
<img src="astronaut.jpg" alt="The Astronaut" class="thumbnail">
156-
<div class="content-text">
157-
<h3><a href="https://www.youtube.com/watch?v=Ki1LrjX87P0" target="_blank">The Astronaut (short film)</a></h3>
141+
<div class="video-container">
142+
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ki1LrjX87P0?si=ZOS1_jMsmvZtMPFI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
158143
<p class="date">December 27, 2012</p>
159144
<p>Captain Tom Anson, hero of the Second Moon War, piloted the first faster than light test flight. But something went wrong and he was launched hundreds of light years into space with a broken hyperdrive. Now he travels home at 99% of the speed of light, but with time dilation his wife and children will be dead.</p>
160145
</div>

0 commit comments

Comments
 (0)