The functionality of responsive video is not functioning properly

Incorporating a responsive video on a Blogger platform can be achieved by following these steps.

Styling with CSS:

.flex-video {
 position: relative;
 padding-top: 25px;
 padding-bottom: 67.5%;
 height: 0;
 margin-bottom: 16px;
 overflow: hidden;
}

.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

 .flex-video iframe,
 .flex-video object,
 .flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video { padding-top: 0; }
}

Using JavaScript (JS):

$(document).ready(function() {
  $('iframe').each(function() {
    $(this).wrap('<div class="flex-video"></div>');
      });
});

If you want to include jQuery animations while hiding videos, check out this helpful tutorial here:

Although the jQuery effect works smoothly, it might affect the responsiveness of the video element.

javascriptjquerycss

Answer №1

The width of your div#wr is fixed. Simply remove it, for example:

#wr {
    margin: 0px auto;
    text-align: left;
}

In addition, you can simplify your jQuery code to the following:

$(document).ready(function () {
    $('iframe').each(function () {
        $(this).wrap('<div class="flex-video"></div>');
    });

    if ($('div.trigger')) {
        $('div.trigger').click(function (e) {
            $(this).toggleClass('open')
                .toggleClass('close')
                .next()
                .slideToggle(100);

            e.preventDefault();
        });
    }
});

Full code: JSFiddle

Answer №2

Replace width with max-width

https://jsfiddle.net/reeyz2Ly/

$(document).ready(function() {
  $('iframe').each(function() {
    $(this).wrap('<div class="flex-video"></div>');
  });
}); 



$(document).ready(function() {

if($('div.trigger').length > 0) {
$('div.trigger').click(function() {
if ($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).addClass('close');
$(this).next().slideDown(100);
return false;
} else {
$(this).removeClass('close');
$(this).addClass('open');
$(this).next().slideUp(100);
return false;
}
});
}

});
.flex-video {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}

.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video { padding-top: 0; }
}



#wr {
max-width:800px;
margin: 0px auto;
text-align: left;
}
.trigger,.trigger a {
display: block;
max-width: 680px;
height: 100px;
text-indent: -999999em;
overflow: hidden;
}
.trigger {
background: url(http://rtse.co.uk/images/clickhere.png) no-repeat 0px 0px;
}
.close {
background: url(http://i.imgur.com/J3iA56c.png) no-repeat 0px 0px;
}
.cnt {
display: none;
}
.cl {
width: 100%;
clear: both;
line-height: 0px;
font-size: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--Responsive video doesn't work-->

<div id="wr">
<div class="trigger open"><a href="#">Open</a></div>
<div class="cnt">
<center><iframe allowfullscreen="" frameborder="0" height="480" src="//www.youtube.com/embed/inrmCnUsdak?rel=0" width="640"></iframe></center>
</div></div>

<br/>
<br/>
<br/>

<!--Responsive video works-->

<iframe allowfullscreen="" frameborder="0" height="480" src="https://www.youtube.com/embed/inrmCnUsdak?rel=0" width="640"></iframe>

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

Relationship between multiple Mongoose instances linking to a single entity

Having an issue regarding mongoose and relationships. My "Athletes" collection has the following schema: var athletesSchema = mongoose.Schema({ name : String, regionName : String, age : Number, overallScore : Number, scores : { ordinnal : String, ...

javascriptnode.jsreactjsmongoose

My clients' mobile devices are not displaying Fontawesome icons, and I am unable to reproduce the issue

My expandable menu with fontawesome arrows is functioning perfectly on desktop browsers and my iPhone. However, some clients are experiencing issues with the icons not showing up when they access the menu on their Android devices, iPads, and Surface Pros. ...

javascriptjquerymobileiconsfont-awesome

Changing the Tab Order in R Shiny: A Step-by-Step Guide

I am currently working on addressing some accessibility issues within a Shiny app. One particular issue I have encountered involves the default behavior of Shiny's tabPanel. Once a tab is visited, its tabindex becomes -1, thus rendering it inaccessibl ...

javascripthtmlrshinytabindex

Use jQuery or Javascript to transform URLs within paragraphs into clickable hyperlinks

As someone who is new to javascript but familiar with jQuery, I've been attempting to utilize the following code to convert instances of www. and http in p tags into clickable links. The issue I'm facing is that while I can implement this code, ...

javascriptjqueryhtml

Activate the scrollbar solely in case of content overflow

I have a situation in my code where I am using overflow-y: scroll to create a scroll bar with a maximum height of 40px. This setup works perfectly fine in the Chrome browser, as the scroll bar is only visible when there is overflow content (i.e. text exten ...

phphtmlcssgoogle-chromemozilla

Map Loader for GeoJson Leaflet Integration

Although my English skills are not perfect, I will do my best to explain my issue. I have some knowledge of javascript / html / ajax and I have created a webgis using Leaflet. The problem arises when loading a large geojson file onto the map - it takes qui ...

javascriptjqueryajaxleafletloader

Unable to properly extract data from SQL database using TinyMCE

When attempting to populate an editor using TinyMCE with content from SQL, I encountered an error. Inside the tinymce.init function, the code is as follows: setup: function (editor) { editor.on('init', function (e) { editor.setContent(&apo ...

phpjquerytinymce

Passing information between VueJs3 components

I have been coding a VueJs3 Project that includes a login system, and it's working perfectly. Now, I want to display the user's logged-in account on the homepage within a div. The message should be: "You are logged in as:" followed by the userna ...

javascriptvue.js

Guide on how to make a table with alternate colspan using Angular

I am looking to create a table layout similar to the following: <div ng-controller="MyCtrl"> <table> <thead> <tr> <th>col1</th> <th>col2</th> ...

javascriptangularjshtml-table

"Encountering an error code 400 while attempting to use @modelAttribute during the submission

I've been attempting to utilize @ModelAttribute, but I keep encountering a 400 (Bad Request) error. Despite scouring numerous SO posts for solutions, none of them seem to address the issue. Here are some approaches I've experimented with: adju ...

jqueryajaxspringjspspring-mvc

Tips for Retrieving Data from a Multi-Dimensional Array

I need help accessing the values in my array and assigning them to variables for later use. I have created an array and used the randomGo() function to generate a random number that corresponds to a pair of numbers within the array. My goal is to assign ...

javascriptarrays

AngularJS / Updating the URL only after the template's resolve property has been successfully resolved

Resolve plays a crucial role in preventing a template from being displayed based on certain conditional logic that deals with the result of a promise (whether it is solved or rejected). In my application, I implement it like this: .config(['$routePr ...

javascriptangularjsroutes

Experience interactive 3D model viewer in action

I want to embed this 3D model viewer into an existing div instead of creating a new one. I've made some edits to the code but it's not working. Any assistance would be greatly appreciated. <script> // Here is where the model viewer cod ...

javascripthtmlthree.jsembed

Interested in transferring an additional column value to the $scope.seriesSelected variable?

I've been delving into Timeline charts using the angularjs google chart API and have come across an interesting limitation. It seems that only 4 columns are allowed, with the extra column designated for tooltips. However, I have a specific requirement ...

javascripthtmlangularjs

Vue3 - Suspense not displaying backup content

I have a parent component and a child component set up as follows: . ├── Index.vue (Parent) └── _GetShipment.vue (Child) Within Index.vue, I am using Office.js's getAsync method to retrieve the content of an email body: <script> imp ...

javascriptvue.jsvuejs3office-jsoffice-addins

Is there a way to retrieve a single value using AJAX instead of returning the entire HTML page?

(edited after initial version) I'm facing an issue where my AJAX call is returning the header.php page instead of just the $result value which should be 0 or 1. The AJAX function calls generateTicket.php, where I want to generate tickets only if no o ...

javascriptphpajax

Click on a React component to receive its property

Hey there! I'm currently in the process of developing an app that allows users to search for books and organize them onto specific shelves with just a click. Right now, users can type a query and see multiple results displayed on the screen. My goal i ...

javascriptreactjseventsonclickreact-props

What could be the reason for the sudden lack of content from the Blogger API?

For weeks, I've been using the Google API to retrieve JSON data from my Blogger account and showcase and style blog posts on my personal website. Everything was functioning flawlessly until yesterday when, out of the blue, the content section stopped ...

javascriptjsongoogle-apiblogger

Having trouble applying styles to a component using forwardRef

I'm relatively new to React and still trying to wrap my head around the component's lifecycle. However, the issue at hand is proving to be quite perplexing. One thing that confuses me is why adding "setState(10);" causes the style of the "Test" ...

javascripthtmlcssreactjs

Adjust the transparency level of a span element inside a div when hovering over it

Is it possible to change the transparency of a span within an a element when the parent div is hovered over? Example HTML code: <div id="about"> <a style="text-decoration: none;" href="/about"><h1>ABOUT ME</h1><br><span ...

htmlcss