asked on 3/13/2017

YouTube Responsive Options

I have this code for a YouTube video, in a WordPress site.

<iframe src="//www.youtube.com/embed/Ql8_GcE9-sg?rel=0" allowfullscreen="allowfullscreen" width="450" height="253" frameborder="0"></iframe>

Open in new window

How do I make this responsive so it is properly sized for a small (phone sized) device?

Thanks

* Responsive WordPress * YouTube

Last Comment

Richard Korts

3/14/2017

lenamtl

3/14/2017

Hi, you should use HTMl5 instead of iframe.

Here is the code I'm using, you can replace local urls by youtube url or vimeo url with their settings.

Always set a poster so if the device cannot display the video so the user will see at least an image.
Be aware that video may not be displayed in some phone browser or some feature may not work like automatic play.
Using 3 video format help for the browser compatibility .

<video controls preload="none" poster="poster.png"> 
   <source src="video1.mp4" type="video/mp4"> 
   <source src="video1.webm" type="video/webm"> 
  <source src="video1.ogv" type="video/ogv"> 
</video>

Open in new window

CSS

video {
  width: 100%    !important;
  height: auto   !important;
}

Open in new window

Or if you are using Bootstrap or other CSS framework you can their media queries
to learn more about media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Richard Korts

3/14/2017

ASKER

To lenamtl,

This is a WordPress site; I presume the original developer inserted a video; WordPress translated it into an iframe.

Not sure what will happen if use the video tag within the WordPress framework.

ASKER CERTIFIED SOLUTION

lenamtl

3/14/2017

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Richard Korts

3/14/2017

ASKER

I also found this CSS in several places, to act as a wrapper for the iframe.

.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}