Blog

Youtube Scroll

/* Basic reset/styling */
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
}

/* Container for the video strip */
.video-strip-container {
/* Enables flexbox layout for horizontal arrangement */
display: flex;

/* Prevents videos from wrapping to the next line */
flex-wrap: nowrap;

/* Hides content that exceeds the container width */
overflow-x: auto;

/* Optional: Style for the scrollbar (browser specific) */
-webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
padding-bottom: 20px; /* Space for the scrollbar */
border: 1px solid #ccc; /* Optional visual border */
}

/* Style for each video item */
.video-item {
/* Forces the video item to take up a fixed width */
flex: 0 0 350px;

/* Adds space between video items */
margin-right: 15px;

/* Sets a fixed height for the video container */
height: 200px;
}

/* Style for the embedded YouTube iframe */
.video-item iframe {
/* Makes the iframe fill the video-item container */
width: 100%;
height: 100%;
}