Create a responsive design for both iframes and embedded videos

When using PlusThis for video tracking, the code functions well on desktop but becomes non-responsive on mobile devices. To maintain the required JavaScript functionality from PlusThis while ensuring responsiveness, I am seeking assistance with modifying the code below:

<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<script type="text/javascript">
    PTFeatureBase.setContactId('[memb_contact fields="Id"]');
    PTFeatureBase.setContactEmail('[memb_contact fields="Email"]');
    PTVideoTriggers.listen({
        type: "vimeo",
        playerId: "vimeo_187399998",
        feature: "1545-MHe1qQxtRTKCd4cTdB5aDcedYjgJORyfcidK6gv1",
        triggerType: "cue",
        times: [660]
    });
</script>

If anyone can assist in making this code responsive without compromising the necessary JavaScript elements required by PlusThis, it would be greatly appreciated!

cssiframeresponsive

Answer №1

PTFeatureBase.setContactId('[memb_contact fields="Id"]');
   PTFeatureBase.setContactEmail('[memb_contact fields="Email"]');
   PTVideoTriggers.listen({
     type: "vimeo",
     playerId: "vimeo_187399998",
     feature: "1545-MHe1qQxtRTKCd4cTdB5aDcedYjgJORyfcidK6gv1",
     triggerType: "cue",
     times: [660]
   });
iframe{
  width:100%;
  height:auto;
 }
<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Answer №2

<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

The use of width and height inside the iframe tag is not recommended. To resolve this, place the iframe tag within a div container and treat the iframe as a child element using CSS. Follow the example below for guidance: HTML code:

<div class="videoiframe">
<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

CSS code:

.videoiframe iframe {width:100%; height: auto}

I hope this clarifies things for you.

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

Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

The situation at hand is quite straightforward. <input type="date /> When viewed on Firefox (both desktop and mobile), it appears as follows: https://i.stack.imgur.com/S2i0s.png While the internet provides a solution specifically for Chrome: ...

htmlcss

Creating a consistent height for Bootstrap 5 Carousel items with varying sizes

I am currently utilizing Bootstrap 5 carousel to display a collection of user-uploaded images that vary in height and width. I am seeking to create a carousel with responsive height and scaled/filled images. Below is the HTML + CSS code snippet I am using ...

htmlcsscarouselbootstrap-5

Position the divs next to each other, ensuring that the right div has a minimum width

I need help aligning two div elements next to each other. However, if the right div has a minimum width and cannot fit in the available space, it should move below the left div! <div id="sidebar"> <div class="box"> <div class="l ...

css

Resolving CSS Objects

If two CSS classes share the same derived class, how does CSS determine the correct class to apply? Consider the following example: .ClassA.Left {} .ClassB.Left {} .Left {} Given that the class 'Left' can be assigned to multiple elements, how ...

cssclassobject

Folded Sidebar

Is there a way to create a collapsed sidebar without the main div moving to the right after opening it? I want the division to resize to fit the screen size instead. Here is an example of what I am looking for: https://www.w3schools.com/howto/tryit.asp?fil ...

cssbootstrap-4sidebar

What is the best way to format a description list with bullet points?

I need to style a <dl> description list that is unordered, so I want bullets before each <dt>. Edit: Just to be clear, I have an unordered list of <dt>-<dd> pairs. They should look like one list item, with the <dt> having a b ...

csshtmlhtml-lists

Adjusting the positioning of two elements inside a container

Contained within the #search-bar div is a clickable image and an h1 element (unfortunately, I am unsure where to place the relevant image.. my apologies). My goal was to separate them as shown. I'm curious if there might be a simpler and more concise ...

htmlcss

Utilizing CSS Grid to create a modern layout design featuring a fullwidth header and footer,

I have a traditional website layout with a header, main content area with a sidebar, and a footer. I want the header and footer to span the entire width on wider screens, while the main content and sidebar are fixed width, surrounded by whitespace. When th ...

htmlcsspositioncss-grid

Empty space at the footer of a document

Recently, while working on multiple websites, I've encountered an issue where a mysterious blank bar keeps appearing at the bottom of the screen. Despite inspecting the elements thoroughly, I am unable to pinpoint the cause. Both the html and body ele ...

htmlcss

Use Bootstrap to effortlessly arrange columns horizontally in a row

I'm facing a scenario where I need to arrange the columns in a row horizontally. The challenge is to ensure that the row expands horizontally to fit the columns. I attempted to use white-space: nowrap on the row, remove floats on columns, and set the ...

htmlcsstwitter-bootstrap

Is it possible to set the radius of a d3.js circle using a style attribute?

Learn more about styling in d3.js with this detailed guide that explains how style attributes can be leveraged to customize the look of a circle, including fill color, stroke color, and stroke width. Is it possible to adjust the radius of a d3.js circle u ...

javascriptcssd3.js

What is the best method to select a specific child element using CSS?

Can anyone help me with styling a table that generates its td elements dynamically? While I can easily access the first and last children, I'm curious: Is it possible to target the second or third child using CSS? ...

htmlcsscss-selectors

Sleek animation designed for a personalized cursor when hovering over an object

I'm currently working on improving the transition of the cursor for a smoother experience. Right now, the size abruptly changes when hovered over the target element. Any suggestions on how I can achieve a smoother increase in size, with a better anima ...

javascripthtmlcss

Achieving Consistent Aspect Ratios with Images in Flexbox Grid

I'm attempting to utilize flexbox for arranging elements in the layout shown below: -- ------ -- | | | | |--| |--| | | | | -- ------ -- Each corner 'box' contains an image with a square aspect ratio of 1:1. The center ...

htmlcssflexbox

Ways to automatically close the search box when the user clicks anywhere within the body

What I desire At the moment, the search box opens and closes when the font awesome search icon is clicked. However, I also want the option for the search box to close if the user clicks anywhere within the body. Screenshot [ My Custom Code <div ...

javascripthtmlcss

Disable body scrolling on mobile devices in native browsers

When using the native browser on Samsung Galaxy S5 / S6, the following CSS code: body { overflow: hidden; } does not successfully prevent the body from scrolling. Is there a way to work around this issue? Edit: As mentioned below, one workaround is t ...

javascriptandroidjqueryhtmlcss

Using CSS background images within MVC3

Attempting to design a style sheet for my MVC3 application. I'm uncertain about the formatting needed for the background-image:url property. background-image:url('../../Content/images/gradient_tile_page_top.png'); or background-image:url ...

cssasp.net-mvc-3

What causes the variance in default word-wrap and overflow behavior between inline and inline-block elements?

Have you ever wondered why inline elements tend to overflow while inline-block elements wrap to the next line? It's confusing because inline-block is essentially just like inline with editable height and width properties, yet their wrapping behavior d ...

htmlcssdisplay

Utilize the entire width for header elements

I have implemented four header elements: home, about, portfolio, and contact. I want these elements to stretch across the entire navigation bar with each taking up 25% of the space. How can I achieve this? Additionally, I specified that the home element sh ...

htmlcss

Transfer the scroll top value from a textarea to a div element

In the parent div, there is a div and a textarea. I am attempting to synchronize the scrollTop value of the textarea with the div so that they move together when scrolling. The issue arises when I input text into the textarea and hit enter for a new line. ...

javascripthtmlcssreactjs