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" >Date:</span > September 27, 2024
100
+ </span >
101
+ <!-- Conference Name -->
102
+ <span >
103
+ <span class =" info-label" >Conference:</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" >Date:</span > April 26, 2024
130
+ </span >
131
+ <!-- Conference Name -->
132
+ <span >
133
+ <span class =" info-label" >Conference:</span > Insomni'hack 2024
134
+ </span >
135
+ </div >
136
+ </div >
0 commit comments