What are the best practices for creating responsive Iframes in videos?

I have been attempting to create a responsive video iframe, but unfortunately, I am facing some difficulties in achieving this. So far, the iframe works fine without any background frame.

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class='embed-container'>
  <iframe src='https://www.youtube.com/embed/vkt0sUM9C54' frameborder='0' allowfullscreen></iframe>
</div>

cssbootstrap-4

Answer №1

Here's a snippet of code that can help you adjust the width of your frame based on different screen sizes:

@media only screen and (max-width:800px)
   /* For tablets: */
   .youriframeclass {
       width: 80%;
       padding: 0;
   }

   .youriframeclass {
       width: 100%;
   }
}

@media only screen and (max-width:500px) {
   /*For mobile phones:*/
   .youriframeclass {
       width: 100%;
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Applying CSS to replicate the vintage iPhone app icon design

I've been searching online for days, but I can't seem to find any helpful resources on how to use CSS3 to style the old iPhone app icon. My goal is to apply a CSS3 style to this curved line, with a fallback option in case older browsers don&apos ...

htmlcsscss-shapes

Chrome browser CSS trapezoid shape clickability problem

I am attempting to make a trapezoidal perspective shape clickable for the entire area. It's currently working in Firefox and IE, but I'm encountering issues with Chrome. Here is a demonstration of the shape and a link: http://jsfiddle.net/9n9uh6 ...

htmlcssperspectivecss-shapes

Issue with the horizontal form design: label is not properly aligned next to text input

I'm having trouble aligning the label with the text box in a Bootstrap 4 horizontal form. The text boxes keep appearing on the next line. Any assistance would be greatly appreciated. <div class="form-group form-group-sm col-sm-6"> <label f ...

twitter-bootstrapbootstrap-4

Shifting the position of an HTML page to one direction

I'm currently working on adding a sidebar to my Twitter Bootstrap 3 project. The goal is to have a fixed positioned nav nav-pills nav-stacked show up on the left side of the page when a button is clicked. I've set its z-index to 1000 so it appear ...

javascriptjqueryhtmlcsstwitter-bootstrap

When you include ng-href in a button using AngularJS, it causes a shift in the alignment of the text within the button

Recently, I've been delving into Angularjs with angular-material and encountered a slight issue with ng-href. I created a Toolbar at the top of my webpage, but the moment I include the "ng-href" attribute to a button, the text inside the Button loses ...

javascripthtmlcssangularjs

The Bootstrap container is extending beyond the boundaries of the page view

Since I'm not a CSS enthusiast, I opted to incorporate Bootstrap into my small project. However, I've encountered an issue where one of the containers is extending beyond the page view, and I can't seem to figure out why. <!-- STYLE ...

htmlcsstwitter-bootstrapbootstrap-5

Utilize jQuery to animate the hiding of my right sidebar

Looking for help with implementing a jQuery animation to hide the right sidebar on my 3-columns page. I created a demo online here - JsFiddle: http://jsfiddle.net/yhfXX/ In my template, the columns are arranged as follows: menu (on the left) is fixed co ...

jqueryhtmlcss

All elements on my webpage are enhanced with a CSS filter

I have a button centered on my page, but the CSS filter I applied to the HTML tag is also affecting the button. How can I prevent this from happening? HTML <body> <div class="button"> <a href="#">START EXPERIENCE</a> ...

htmlcss

Toggle visibility of div content when hovering over a link by leveraging the data attribute, with the div initially visible

I have a collection of links: <p><a href="#" class="floorplan initial" data-id="king"><strong>King</strong></a><br> 4 Bedrooms x 2.5 Bathrooms</p> <p><a href="#" class="floorplan" data-id="wood">< ...

javascriptjqueryhtmlcss

Issues with Bootstrap display not functioning as expected on mobile device in live environment

My application works perfectly when accessed through a computer. When I resize the window on my computer, the Bootstrap columns are responsive and function correctly. However, after deploying to Heroku and accessing the site on my phone, the desktop layout ...

htmlruby-on-railsherokubootstrap-4col

Creating a uniform system for PHP and CSS that eliminates the need for string parsing

I apologize for the insufficient title. In the given code snippet: <?php $css = 'foo-'.$data['style']; $html= "<table><tr><td class='{$css}>styled! /> </tr> </table>; ?> whe ...

phphtmlcss

The close button is not functioning properly

I created a script to close my div element by clicking on the 'x' icon, but instead of deleting the div only, the whole page gets deleted. I'm not sure where I went wrong, can anyone help me? HTML <div class="note"> <span id ...

javascriptjqueryhtmlcss

Is it possible to apply CSS styling to a flex-item once it wraps onto a different row?

.wrapper { border: 5px solid pink; display: flex; flex-wrap: wrap; justify-content: center; } .a-fc { background-color: purple; width: 300px; /*height: 100px;*/ } .b-fc { background-color: orange; display: flex; flex-direction: ...

javascripthtmlcssflexbox

The dropdown submenu in Bootstrap 3 remains persistently open

I'm currently working on creating a submenu dropdown and following this reference link: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_events2&stacked=h However, I am facing an issue where all my submenus are always ...

cssdrop-down-menubootstrap-4dropdown

The option to "open in new tab" is absent from the right-click menu when clicking a link on a website

Why does the option to open a link in a new tab not appear when using JavaScript or jQuery, but it works with an anchor tag? I have tried using window.location and window.open, as well as adding the onclick attribute to a div, but the option still doesn&ap ...

javascriptjquerycsshtml

Using my aspx page as the central point for my web application, incorporating HTML5 codes for development

I created an aspx file for my GUI, image buttons, and image slide shows using HTML5, CSS, and javascript. I finished the HTML5 part in the aspx file format within visual studio 2012. To standardize my GUI for all other web forms, I tried creating a new mas ...

javascriptcsshtmlvisual-studiomaster-pages

How to create a custom CSS style to make Bootstrap 4 modal slide in from the bottom

Back in the days of Bootstrap 3, this was the trick: .modal.fade .modal-dialog { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); } Another approach that could have been used: .modal.fade .modal-dialog { transfor ...

csstransformbootstrap-4twitter-bootstrap-4

Unusual <li> actions

Recently, I've been working on a website that you can check out here: I've encountered an issue where the content in a particular section seems to be behaving strangely. When I search for the number 1992 (Ctrl+F), I notice that the list items ar ...

htmlcsshtml-lists

Tips for positioning a div under a floated div

I've searched extensively for a solution to this problem with no luck. I'm having trouble moving my main code under the Navigation Bar. Maybe my code is too unconventional, but I can't seem to figure it out. Can anyone assist me? Thank you i ...

htmlcss

Ways to slightly boost the default font-size values when using wicked-pdf

In the wicked-pdf report, I have body content with varying font sizes. When I apply a font-size of 16px to the paragraph like so: p { font-size: 16px !important; } The entire paragraph's font size becomes 16px, which may include words with diff ...

ruby-on-railshtmlcssruby-on-rails-2wicked-pdf