Avatar of Richard Korts
Richard KortsFlag for United States of America asked on

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
* ResponsiveWordPress* YouTube

Avatar of undefined
Last Comment
Richard Korts

8/22/2022 - Mon
lenamtl

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
ASKER
Richard Korts

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

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Richard Korts

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%;
}
Your help has saved me hundreds of hours of internet surfing.
fblack61