Responsive YouTube

[Joseph]

Hi support,
Can you make the theme support YouTube video responsive by default? Right now, it is showing as this: http://imgur.com/vYS3VWc I can figure out to be YouTube responsive, but I prefer if the theme can support it.

Regards,

[Davinder Singh Kanith]

You can explore two options:

1. Use this plugin – https://wordpress.org/plugins/responsive-video-embeds/

2. Or use CSS implementation. Add following code to style.css file

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

and then embed video using this code format

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

Source – https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

P.S. Plugin method is recommended as it is automatic.

[Joseph]

Hi Davinder,
I am just curious if Flex theme can support by default as I’ve seen most of the Genesis theme doesn’t. In fact, I am using the code from here https://github.com/davatron5000/FitVids.js

[Davinder Singh Kanith]

Hi Jospeh

The plugin mentioned above uses similar JS script file as FitVid. We did not include such script file by default as this would make code heavy since majority users do not embed videos.

However, we have taken note of your suggestion – we may add this in future update. Thanks.

[Author]

Posts