We help IT Professionals succeed at work.

YouTube Responsive Options

58 Views
Last Modified: 2020-08-15
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
Comment
Watch Question

CERTIFIED EXPERT

Commented:
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 KortsBusiness Owner / Chief Developer

Author

Commented:
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.
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
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%;
}
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.