Embedded Youtube video size problem

  • Hello,
    I have had a Youtube video on my site for months with no problems. Now, the video is displayed across the full screen, even though my embed code specifies the height and width. This was displaying correctly until just recently. It displays correctly on my localhost site.

    What changes can I make to get the video to display the proper size.

Viewing 16 replies (of 16 total)

  • I got to thinking that I had actually solved the issue a while back. I don’t know if these codes will work now, but you could try them.

    This…

    .video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

    Or this…
    To restrict the width of the video, an additional <div> wrapper is required. Wrap the video with another <div> tag and specify a fixed width value (…whatever you want) with max-width: 100%.

    .video-wrapper {
	width: 600px;
	max-width: 100%;
}

<div class="video-wrapper">
	<div class="video-container">
		<iframe src="https://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
	</div>
</div>
Viewing 16 replies (of 16 total)
  • The topic ‘Embedded Youtube video size problem’ is closed to new replies.