Embedded Youtube videos float to the right when viewed on phone - html

I'm making a responsive website and I have a few Youtube videos on it. When I view my site on > 479px resolution, the videos stay at the center, but when I view on phone screen resolution or when I scale down my browser to < 480px, the videos float all the way to the right. Right now Im using text-align: center to center the video.
Here's my code:
.youtube{
text-align: center;
}
<p class="youtube">
<iframe width="560" height="340" src="https://www.youtube.com/embed/Ubl3r5mGRtg" frameborder="0" allowfullscreen></iframe></br>
<iframe width="560" height="340" src="https://www.youtube.com/embed/xgr38LWUf7w" frameborder="0" allowfullscreen></iframe></br>
<iframe width="560" height="340" src="https://www.youtube.com/embed/ylT54zdmGCk" frameborder="0" allowfullscreen></iframe>
</p>

You could add to your css:
iframe { max-width: 100%; }
And maybe fix the height with some media queries.

Related

How can I turn a column that includes a video into a row on mobile devices?

I have this piece of code here that shows an embedded youtube video beside a paragraph of text on my website.
<div class="container" style="width: 100%; display: table;">
<div style="width: 60%; display: table-cell; vertical-align: top; margin: 10px;">
Text Goes Here
</div>
<div style="width: 40%; display: table-cell; margin: 10px;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/fJ9rUzIMcZQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
This works as intended on computers, however when it comes to mobile devices the structure obviously doesn't change and we can see a small video player beside a very narrow text.
How can I make it so that the video goes below the text specifically just on mobile devices or narrow browsers? The usage of iframe seems to limit what I want to achieve but I can't think of another way of including an embedded youtube video.
To achieve your goal you need mediaqueries that you use to visualize the elements separately depending on the screen size. So you can make and adapt your own visualizations for each device. You can find a great contribution to mediaqueries and how they work here:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

How can I put my YouTube videos on the same line?

I would like to put both my YouTube videos on the same line. I tried adjusting the iframe and creating a wrapper, but it doesn't seem like I'm targeting the right things. I'm not sure where I went wrong. Here's my JFiddle: https://jsfiddle.net/6a73m27n/
.content {
margin-top: 15px;
}
iframe {
float: left;
}
<div class="video_wrapper">
<iframe width="400" height="200" src="https://www.youtube.com/embed/3S_dmC2soik" frameborder="0" allowfullscreen></iframe>
<iframe width="400" height="300" src="https://www.youtube.com/embed/bdGhmMzj4uE" frameborder="0" allowfullscreen></iframe>
</div>
Just mention the width of the video in percentage as shown below:
<div class="video_wrapper">
<iframe width="40%" height="200" src="https://www.youtube.com/embed/3S_dmC2soik" frameborder="0" allowfullscreen></iframe>
<iframe width="40%" height="200" src="https://www.youtube.com/embed/bdGhmMzj4uE" frameborder="0" allowfullscreen></iframe>
It actually works if you have enough width for both of them on one line.
Despite that, I would recommend you to put this styling to the iframe instead:
iframe {
display: inline-block;
vertical-align: top; /* or middle, bottom, baseline by your preference */
}

Embed video in an image in responsive html5

I'm trying to embed a video inside an image, the challenge is that the page is responsive. The video looks in place on full screen, however it moves out of the box when resolution changes.
So I want the video to be inside the image frame at all sizes. Should I use #media or is there another way?
<div class="col-md-4">
<img class="img-responsive" style="width:344px;height:780px"
src="Images/mywork-images/cicis/cicis-mobile.jpg">
<div class="player">
<iframe src="https://player.vimeo.com/video/139805324"
width="290" height="290" frameborder="0"
webkitallowfullscreen mozallowfullscreen
allowfullscreen></iframe>
</div>
</div>
.player{
position: relative;
height: 0;
bottom: 565px;
left: 21.3%; /* 110px */
}

Wordpress Video Align middle not working

I have a problem with one WordPress theme.
This is URL of my site and if you scroll down to the iFB section
then you will see a video there.
I have entered this code to put it to this page
<iframe
src="https://www.youtube.com/embed/KO2hFoKDh18"
width="560"
height="315"
frameborder="0"
align="middle"
allowfullscreen="allowfullscreen"
></iframe>
but still going left.
Anyone that can help me?
<iframe src="https://www.youtube.com/embed/KO2hFoKDh18" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
element.style {
margin-left: 400px;
}
if you want to align your data than you can align it many ways. align center was not working do you to inheritance so you could it with css. make a class here style. so in script tag you can give margin-left so it will move towards right adjust as you need.
.style {
margin-left: 400px;
}
</style>
<iframe class="style" src="https://www.youtube.com/embed/KO2hFoKDh18" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Responsive video page size

I am building a video page and I would like computer screens to show the 560X315, however, when I add the responsive code and dimensions as stated, the video is not responsive. When I remove the height/width dimensions, the video shrinks to almost thumbnail size.
<div class="videoWrapper embed-responsive-16by9" style="width: 100%; height: 100%; text-align: center;" data-videoid="10466530-95d9-d044-a0c4-be94a145d863"><iframe width="560" height="315" align="center" src="https://www.youtube.com/embed/o4PwOUDFhqM?list=PL9T_50FV6xCo5Y4Jr0vfSUaqrS0cZ6_yD" frameborder="0" allowfullscreen="" overflow="hidden"></iframe></div>
How do I get the video to display on the screens as the 560x315 but still be responsive?