I just started studying CSS
I'm trying to upload the video to the top of the page but I can't
Would appreciate help
Would appreciate help
`
<div class="video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/YhK8tIfyVwI"
frameborder="0"
allow=" autoplay; picture-in-picture"
allowfullscreen
></iframe>
</div>
`
Related
<div class="ratio ratio-4x3 justify-content-center align-items-center mx-auto">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
I'm using bootstrap 5. When I use "ratio" the iframe aligns to the right. How can I use "ratio" and still align this ifram in the center?
Probably going to be yelled at for suggesting this because HTML5 has deprecated it, but the <center> tag works well for this scenario.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<center>
<iframe align="center" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</center>
Another way is to use style="display: flex; justify-content: center;" for the outer div element
<div class="ratio ratio-4x3 justify-content-center align-items-center mx-auto" style="display: flex; justify-content: center;">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" ></iframe>
</div>
You need to move your flex related classes to a div above, so that the div that is controlled by the ratio width & heights can be centered:
<div class="flex justify-center items-center w-full">
<div class="ratio ratio-4x3 mx-auto">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
scrolling="no" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</div>
PS. I used Tailwind classes, just convert them to bootstrap 5 classes - I'm not sure what those are - probably just more verbatim: justify-content-center align-items-center
I have read many post and tried everything to make the iframe responsive and keeping the 16-9 ratio... it is not bad but the video is still cropped in the youtube frame.
What is the trick with bootstrap 5?
<div class="embed-responsive embed-responsive-16by9" style="width:800px; height:450px">
<iframe class="embed-responsive" title="YouTube video player" src="{{ $image['image']['url'] }}" frameborder="0" allowfullscreen="" width="100%" height="100%"></iframe>
</div>
Was having the same problem, documentation on the bootstrap site says this:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" title="YouTube video player" src="https://www.youtube.com/watch?v=jNQXAC9IVRw" allowfullscreen=""></iframe>
</div>
But this doesn't work, height was being ignored.
I found a solution on MD Bootstrap docs:
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video" allowfullscreen></iframe>
</div>
MD Bootstrap: Embeds
Works perfect for me on BS5 if you add height & width
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video" style="max-width: 100%;height: 100%;" allowfullscreen></iframe>
</div>
This information can also be found in the bootstrap 5 documentation:
https://getbootstrap.com/docs/5.0/helpers/ratio/
https://getbootstrap.com/docs/5.0/migration/
This soluction was the only worked at all in bootstrap 5:
<div class="col-12 col-md-8 offset-md-2 col-lg-8 offset-lg-2">
<div class="ratio ratio-16x9 text-center mt-4 mb-4 ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/DTpvdyzxQWE?controls=0" style="max-width: 100%;height: 100%;" allowfullscreen></iframe>
</div>
</div>
This version should work.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" title="YouTube video player" src="https://www.youtube.com/watch?v=jNQXAC9IVRw" allowfullscreen=""></iframe>
</div>
Don't ask me why but during some testing adding older bootstrap css did the trick for me while using the bootstrap format as posted by Jnic:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
Website is www.lionofjudahworldwide.com
Click on buy incense
On laptop table sizes correctly..
On phone animated gif is outside bounds...
Here is code
Table A
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/vWXK8yhFYm8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></p>
copied from inside youtube
Table B
<img src="http://s2.favim.com/orig/150513/aesthetic-grunge-hipster-pale-Favim.com-2728352.gif" width="500" height="281" class="alignnone size-medium" />
Please use width in %.
<p><iframe width="100%" height="315" src="https://www.youtube.com/embed/vWXK8yhFYm8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></p>
<img src="http://s2.favim.com/orig/150513/aesthetic-grunge-hipster-pale-Favim.com-2728352.gif" width="100%" height="281" class="alignnone size-medium" />
It will work.
I have a vimeo video loading through a dynamically created iframe on my site. For mobile devices i need to change the src from:
<iframe src="https://player.vimeo.com/video/220535146?controls=0&hd=1&autoplay=1&player_id=banneroneVid&api=1" width="640" height="360" frameborder="0" title="reebok_short_loop" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0" id="banneroneVid" ></iframe>
to
<iframe src="https://player.vimeo.com/video/220535146?background=1" width="640" height="360" frameborder="0" title="reebok_short_loop" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0" id="banneroneVid" ></iframe>
Ideally i would like this to happen as the page is loading.
thank you
Use media queries to load the iframe you want depending on the device.
Something like this: (e.g. if you're using bootstrap)
<!-- bigger screens -->
<div class="hidden-xs col-sm-12 col-md-12 col-lg-12">
<iframe src="https://player.vimeo.com/video/220535146?controls=0&hd=1&autoplay=1&player_id=banneroneVid&api=1" width="640" height="360" frameborder="0" title="reebok_short_loop" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0" id="banneroneVid" ></iframe>
</div>
<!-- mobile devices with max-width: 768px -->
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
<iframe src="https://player.vimeo.com/video/220535146?background=1" width="640" height="360" frameborder="0" title="reebok_short_loop" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0" id="banneroneVid" ></iframe>
</div>
How many YouTube videos can be embedded in my website? I embed videos 3 and unfortunately, is not one video shows a first video is included page and the rest did not show
<iframe id="ytplayer" type="text/html" width="420" height="315" style="position:relative;z-index:1 !important;"
src="https://www.youtube.com/embed/YlDAzMpbZso"
frameborder="0" allowfullscreen></iframe>
<iframe id="ytplayer" type="text/html" width="420" height="315" style="position:relative;z-index:1 !important;"
src="https://www.youtube.com/embed/YlDAzMpbZso"
frameborder="0" allowfullscreen></iframe>
<iframe id="ytplayer" type="text/html" width="420" height="315" style="position:relative;z-index:1 !important;"
src="https://www.youtube.com/embed/YlDAzMpbZso"
frameborder="0" allowfullscreen></iframe>
You can't have multiple elements with the same id. That's invalid HMTL.