1+     <style >
2+         /*  Main container for the talk recording display */  
3+         .talk-container  { 
4+             background-color #ffffff ; /*  White background */  
5+             border 1px   solid  #e0e0e0 ; /*  Light gray border */  
6+             border-radius 10px  ; /*  Rounded corners */  
7+             box-shadow 0  4px   8px   rgba (0 , 0 , 0 , 0.1 ); /*  Subtle shadow */  
8+             padding 25px  ; 
9+             max-width 600px  ; /*  Max width for readability */  
10+             width 100%  ; /*  Full width within max-width */  
11+             margin auto ; /*  Center the container */  
12+             text-align center ; /*  Center text content */  
13+         } 
14+ 
15+         /*  Talk Title */  
16+         .talk-title  { 
17+             /* font-size: 2em; /* Larger font size for title */  
18+             font-weight bold ; 
19+             color #333333 ; /*  Darker text color */  
20+             margin-bottom 20px  ; 
21+             line-height 1.2 ; /*  Better line spacing */  
22+         } 
23+ 
24+         /*  Video Embed Code Container */  
25+         .video-container  { 
26+             position relative ; 
27+             padding-bottom 56.25%  ; /*  16:9 aspect ratio (height / width * 100%) */  
28+             height 0 ; 
29+             overflow hidden ; 
30+             border-radius 8px  ; /*  Rounded corners for the video container */  
31+             margin-bottom 20px  ; 
32+         } 
33+ 
34+         .video-container  iframe  { 
35+             position absolute ; 
36+             top 0 ; 
37+             left 0 ; 
38+             width 100%  ; 
39+             height 100%  ; 
40+             border 0 ; /*  No border for the iframe */  
41+         } 
42+ 
43+         /*  Date and Conference Name container */  
44+         .info-container  { 
45+             display flex ; 
46+             flex-direction column ; /*  Stack vertically on small screens */  
47+             justify-content space-between ; 
48+             align-items center ; 
49+             font-size 0.9em  ; /*  Slightly smaller font for info */  
50+             color #666666 ; /*  Gray text color */  
51+             margin-top 15px  ; 
52+         } 
53+ 
54+         /*  Responsive adjustments for info container */  
55+         @media  (min-width : 600px  ) { 
56+             .info-container  { 
57+                 flex-direction row ; /*  Side-by-side on larger screens */  
58+             } 
59+         } 
60+ 
61+         .info-container  span  { 
62+             margin-bottom 8px  ; /*  Spacing between items on small screens */  
63+         } 
64+ 
65+         @media  (min-width : 600px  ) { 
66+             .info-container  span  { 
67+                 margin-bottom 0 ; /*  Remove spacing on larger screens */  
68+             } 
69+         } 
70+ 
71+         .info-label  { 
72+             font-weight bold ; 
73+             color #555555 ; /*  Slightly darker label color */  
74+         } 
75+      </style >
76+ </head >
77+ <div  class =" talk-container" 
78+     <!--  Talk Title --> 
79+     <h2  class =" talk-title" 
80+         <!--  Placeholder for the talk title --> 
81+         Sanitize Client-Side: Why Server-Side HTML Sanitization is Doomed to Fail
82+     </h2 >
83+     <!--  Video Embed Code Container --> 
84+     <div  class =" video-container" 
85+         <!--  Placeholder for the embed code (e.g., YouTube iframe) --> 
86+         <!--  Replace this iframe with your actual embed code --> 
87+         <iframe 
88+             src =" https://www.youtube.com/embed/2ncTor7LVkY" 
89+             title =" Sanitize Client-Side: Why Server-Side HTML Sanitization is Doomed to Fail - Yaniv Nizry" 
90+             allow =" accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
91+             referrerpolicy =" strict-origin-when-cross-origin" 
92+             allowfullscreen >
93+         </iframe >
94+     </div >
95+     <!--  Date and Conference Name --> 
96+     <div  class =" info-container" 
97+         <!--  Date of the talk --> 
98+         <span >
99+             <span  class =" info-label" span > September 27, 2024
100+         </span >
101+         <!--  Conference Name --> 
102+         <span >
103+             <span  class =" info-label" span > OWASP Global 2024 San Francisco
104+         </span >
105+     </div >
106+ </div >
107+ <div  class =" talk-container" 
108+     <!--  Talk Title --> 
109+     <h2  class =" talk-title" 
110+         <!--  Placeholder for the talk title --> 
111+         Beating The Sanitizer: Why You Should Add MXSS To Your Toolbox
112+     </h2 >
113+     <!--  Video Embed Code Container --> 
114+     <div  class =" video-container" 
115+         <!--  Placeholder for the embed code (e.g., YouTube iframe) --> 
116+         <!--  Replace this iframe with your actual embed code --> 
117+         <iframe 
118+             src =" https://www.youtube.com/embed/g3yzTQnIgtE" 
119+             title =" Beating The Sanitizer: Why You Should Add MXSS To Your Toolbox - Paul Gerste & ;  Yaniv Nizry" 
120+             allow =" accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
121+             referrerpolicy =" strict-origin-when-cross-origin" 
122+             allowfullscreen >
123+         </iframe >
124+     </div >
125+     <!--  Date and Conference Name --> 
126+     <div  class =" info-container" 
127+         <!--  Date of the talk --> 
128+         <span >
129+             <span  class =" info-label" span > April 26, 2024
130+         </span >
131+         <!--  Conference Name --> 
132+         <span >
133+             <span  class =" info-label" span > Insomni'hack 2024
134+         </span >
135+     </div >
136+ </div >
0 commit comments