Steps to create a responsive iframe for Slideshare

Recently, I included a slideshare iframe presentation on my webpage.

Here is the code snippet I used: 

<iframe src="//www.slideshare.net/slideshow/embed_code/key/HQoiz6GR1oLe1n" width="860" height="600" frameborder="600" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
However, I noticed that when I view the page on my mobile phone, there is a black area surrounding the presentation: screenshot

I suspect this issue is due to the defined style height="600", but removing it makes the presentation small. Does anyone know how to eliminate these black areas around the presentation?

htmlcsswordpressiframe

Answer №1

Creating responsive slideshare embeds with CSS is a straightforward process. By adding an outer div element with specific dimensions, you can ensure that the height scales appropriately based on the width. This involves setting the padding-bottom to a percentage calculated from the aspect ratio (e.g., 56.25% for a 16:9 ratio) along with extra padding for slide navigation.

<div class="iframe-slideshare-16x9">    
    <iframe src="//www.slideshare.net/slideshow/embed_code/key/h1Fw1vmfv5uVlM" 
        frameborder="0" 
        marginwidth="0" 
        marginheight="0" 
        scrolling="no" 
        allowfullscreen> 
    </iframe>
</div>

Here is the corresponding CSS code:

.iframe-slideshare-16x9 {
    padding-bottom: calc(56.25% + 38px);
    position: relative;
    width: 100%;
    height: 0;
}

.iframe-slideshare-16x9 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #CCC; 
}

To learn more about this technique, visit my blog at:

Answer №2

There doesn't seem to be an issue with the iframe as it is functioning correctly and responsive.

The only problem lies in the size of the images/slides within the slideshare iframe, they appear a bit small in height. Unfortunately, it seems there isn't much that can be done about this.

I hope this explanation helps clarify things for you.

Answer №3

Include this media query in your stylesheet:

@media (max-width: 667px) {
   img {
     width: 300px;
   }
}

You can adjust the values to suit your needs.

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

Is there a valid substitute for using hot links with images?

Currently, I am instructing a group of individuals on the intricacies of web development with a specific focus on AngularJS. As part of an exercise that I designed for them, they are required to fetch data from the freely accessible pokeapi.co. One interes ...

htmlangularjsimageapihttp-status-code-403

Activate a pointer cursor when hovering over a TextField in Material-ui design

Hey there! I'm new to Material-ui/ReactJS and I have a question. I'm trying to change the cursor to a pointer when hovering over a Material-ui TextField, but it's proving to be quite challenging. The default behavior is 'cursor: text&ap ...

cssreactjsmaterial-ui

In the year 2018, a special named anchor was created that, when clicked, conceals all

Hello, I'm facing a frustrating issue with my webpage that is driving me crazy. I have a simple hyperlink <a href="#OrientationSchedule">See schedule below</a>. When clicked, it navigates to the named anchor further down on the same page, ...

html

Issues with hover menu arise following relocation of primary menu

#header { height: 108px; width: 1140px; background-color: #faa220; position: relative; } #Logo2 { height: 108px; float: left; } #header links { height: 50px; float: left; list-style: none; padding-top: 10px; } #container { overflo ...

htmlcss

How to set the default theme color for the mat-sidenav background in Angular 6 and 7?

Is there a way to make the background of a mat-sidenav match the theme color of my mat-toolbar? In the file src\styles.scss, I have the following: @import '~@angular/material/prebuilt-themes/indigo-pink.css'; The template / HTML file incl ...

htmlcssangularangular-material

Tips for decreasing the placeholder font size within a mobile media query

I'm encountering a strange issue. I successfully managed to decrease the font size of the placeholder text for my desktop design, but it's not working for my mobile phone media query. I started with the desktop version and used a max width of 480 ...

htmlcss

Tips for concealing the Google Chrome status bar from appearing on a webpage

I have been intrigued by the rise of Progressive Web Apps (PWAs) and I am eager to dive into understanding them better. One common feature I have noticed in PWAs is the ability to hide the browser chrome, including the URL bar, back button, search fields, ...

javascripthtmlprogressive-web-apps

The FileReader.result is found to be null

Currently, I am in the process of setting up a page that allows users to upload a txt file (specifically a log file generated by another program) and then modify the text as needed. Initially, my goal is to simply console.log the text, but eventually, I pl ...

javascripthtmlfile

Generate an li element that is interactive, containing both text and a span element

I am dealing with a JSON array that looks like this: var teamDetails=[ { "pType" : "Search Engines", "count" : 5}, { "pType" : "Content Server", "count" : 1}, { "pType" : "Search Engines", "count" : 1}, { "pType" : "Business", "count" : 1,}, { "pTyp ...

javascriptjqueryhtmljsonajax

Confirm the data in each field of a form individually

I am facing an issue with a form that contains 7 fields. When I submit the form to the "register.php" page, it processes each field one by one and outputs the result as a whole. However, I need to validate the data using ajax, collect the output one by one ...

javascriptphpajaxhtmlforms

Conceal Bootstrap 3 tooltip

There's a tooltip attached to a button within a bootstrap dropdown. Whenever I click that button, the original button is hidden and another button is displayed. However, the tooltip from the previous button remains visible until I scroll vertically or ...

htmltwitter-bootstrap-3tooltip

The default margin of an HTML element is set to fill the width of its containing div and cannot be overridden

As a budding web developer, I'm encountering a basic issue that has me scratching my head. Any assistance would be highly appreciated: Regardless of the width I specify for elements within a particular div container, both Safari and Chrome seem to au ...

htmlcsspositionmarginmargins

The HTML table seems to be inexplicably replicating defaultValue values

I'm encountering an issue where, when I use JavaScript to add a new table data cell (td), it ends up copying the defaultValue and innerText of the previous td in the new cell. This is confusing to me because I am simply adding a new HTML element that ...

javascripthtmlreactjs

A step-by-step guide on integrating a Django template tag and HTML element into an HTML page using Javascript

Is there a safe way to insert HTML that includes Django template tags using JavaScript in my project? For instance, if my template contains the following code: <div id="some-element"> <span id="my-tag">{{ my_data }}</sp ...

javascripthtmldjango

What is the best way to implement Bootstrap in Coda2?

I am new to web design and I am trying to incorporate Bootstrap into my HTML code using Coda2. Since I don't have access to a server, I am referencing the directory address of CSS files on my hard drive instead of a web address. Currently, the beginni ...

htmlcsstwitter-bootstrapcoda

Avoid navigating through hidden tab indexes

Below is the HTML code that I am working with: <span tabindex="19"> </span> <span tabindex="20"> </span> <span tabindex="21"> </span> <span id="hidden" tabindex="22"> </span> <span tabindex="23"&g ...

javascriptjqueryhtml

Rearrange the sequence of specific child elements within the Div

Is there a way to reverse the order of specific div's children elements using just CSS? For instance: I need <div id="parent"> <a>A</a> <a>B</a> <a>C</a> <a>D</a> &l ...

htmljquerycsstwitter-bootstrapbootstrap-4

Unusual Behavior of *ngIf and jQuery in Angular 5: A curious case

I'm encountering a strange issue when using the expand-collapse feature of Bootstrap 4 with *ngIf for expansion and collapse. I noticed that the jQuery doesn't work when *ngIf is used, but it works fine when *ngIf is removed. HTML: <div cla ...

htmlangulartypescript

Refreshing a webpage is not necessary when using a JQuery form within a div

I need help with some code I have. In my index.html file, there is a div: <div id="logindiv"> <?php require_once('login.php'); ?> </div> This div is utilized with jQuery: <script type="text/javascript"> $(document ...

phpjqueryhtml

JavaScript Time Counter: Keeping Track of Time Dynamically

Currently, I am attempting to create a dynamic time counter/timer using JavaScript. Why dynamic? Well, my goal is to have the ability to display days/hours/minutes/seconds depending on the size of the timestamp provided. If the timestamp is less than a d ...

javascripthtmltimer