Utilize a personalized hyperlink to encase an Instagram embed

I'm currently trying to display a list of Instagram embeds, but I'd like users to be able to visit a display page before being directed to the actual Instagram embed page.

My idea is to enclose each Instagram embed within a hyperlink for this purpose.

After researching, I found an example that attempted something similar with iframes on Stack Overflow. You can view it here.

Here's an example of how I tried to achieve this:

<a href="http://tumblr.com" target="_blank" class="linkwrap">
<div class="blocker"></div>
    <iframe width="420" height="315" src="https://www.youtube.com/embed/5Xbs60BMeRU" frameborder="0" allowfullscreen></iframe>
</a>

Although this code worked with iframes, it didn't quite work as expected when attempting the same with Instagram embeds.

Below is an example of my attempt using an Instagram embed:

<a href="http://go.com/somewhere" target="_blank" class="linkwrap">
<div class="blocker"></div>
  <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/Bu1XAkYluJ6/?utm_source=ig_embed&amp;utm_medium=loading&amp;utm_campaign=embed_loading_state_camera" data-instgrm-version="11" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> [Instagram Embed Code Here] </div></blockquote>
</a>
javascripthtmlcssinstagram

Answer №1

I just realized that instead of using a blockquote, I could simply insert an Instagram embed using an iframe and it worked perfectly fine.

<a href="http://tumblr.com" target="_blank" class="linkwrap">
<div class="blocker"></div>
    <iframe width="420" height="315" src="https://www.instagram.com/p/BdWFZSRBwX8/embed" frameborder="0" allowfullscreen></iframe>
</a>

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

Steps to implement a fixed toolbar in Chrome while ensuring optimal functionality for all other fixed elements

Currently in the process of developing a Chrome extension, I'm interested in implementing a 60px height toolbar that remains visible at the top of all pages. I've researched various tutorials and articles on using CSS translateX, but encountered ...

javascripthtmlcssgoogle-chrome-extension

Issue encountered when attempting to assign an action() to each individual component

I'm facing an issue with the button component I've created. import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-button', template: ` <ion-button color="{{color}}" (click)="action()"&g ...

javascriptangularionic-framework

Having trouble importing d3.js and typescript in IntelliJ?

Encountering errors in browsers' console when utilizing d3.select() in typescript code. Despite trying alternative methods like d3-timer.now(), the issue persists. As a newcomer to typescript, I am utilizing intelliJ Ultimate 2019.1. Through npm, I h ...

javascripttypescriptd3.jsintellij-ideaecmascript-6

Did I incorrectly associate the function with the button causing it to always be executed?

I am working on a PHP page, where I have some initial content followed by session initialization code: <?php session_start(); ?> The requirement is to display a disconnect button only if the user is logged in, indicated by the presence of $_SESS ...

javascriptphphtml

Did you manage to discover a foolproof method for the `filesystem:` URL protocol?

The article on hacks.mozilla.com discussing the FileSystem API highlights an interesting capability not previously mentioned. The specification introduces a new filesystem: URL scheme, enabling the loading of file contents stored using the FileSystem API. ...

javascriptfilesystemsw3chtml5-filesystem

"Step-by-step guide on triggering the ng-click function for the first row within an ng

I'm facing an issue where the first set of data from the ng-repeat div is not loading before clicking on the ng-repeat. Below is the code snippet: <div class"profile" ng-repeat="data in information" ng-click="getData(data.i ...

javascripthtmlangularjs

What's the reason Rails is not recognizing relative JavaScript files?

app/assets/javascripts/application.js: //= require jquery //= require jquery_ujs //= require_tree . //= require bootstrap.min app/assets/javascripts/economy.js: $(document).ready(function() { console.log("loaded file"); }); app/views/economy/index.ht ...

javascriptjqueryruby-on-rails

Is there a way in vee-validate to validate specific sections of a form?

I'm struggling with my English skills. When I utilize 'this.$validator.validate()', I am seeking a way to only validate specific inputs on the page. Is there a method to achieve this? ...

javascriptvue.jsvee-validate

Upon attempting to fetch input by name, Puppeteer reported the error message: 'Node is not clickable or not an HTMLElement'

This is the structure of my HTML: <div id="divImporte"> <p class="btn01"> <input type="button" name="Enviar Tasas" value="Enviar Tasas"> </p> </div> Here are the diffe ...

javascriptnode.jsseleniumpuppeteernode-red

What is the procedure to obtain a session object on the server side in next.js version 14?

I am currently utilizing version 14 of next.js with its app routing feature and NextAuth. My goal is to secure the API, however, I encounter a null object when using the getServerSession( authOptions ) method while attempting to access a protected endpoin ...

javascriptsessionnext.jspostmannext-auth

JQuery enables nested sorting functionality

I need to enable the sortable feature specifically for the charts. Index.cshmtml <div id="sortable" class="col-lg-9"> <div class="col-lg-12 col-md-12 padding hidden" id=@($"chartNumber{Model.Charts[ ...

javascriptjqueryjquery-uirazor-pages

Displaying PHP output within a JavaScript expression

Let's dive into a scenario involving a basic HTML document and some JavaScript that's loaded within it: <!-- doc.html --> <!doctype html> <html lang="en"> <head> <script type="text/javascript" src=" ...

phpjavascripthtml

Issue with Ionic Grid: Row not occupying entire width of the container

Currently, I am working on creating a straightforward grid consisting of one row and seven columns. Each column holds a div with a single letter of text inside. My intention is for these columns to evenly space out across the page by default, but unfortu ...

htmlcssionic-framework

Display text with a hover effect

When I hover over an image, I want to display some text. I managed to make it work, but the text was expanding the size of the card. To solve this issue, I added a display none to the text class. I can't include all the code here, so here's a sn ...

htmlcssbootstrap-4

Alter the button's color seamlessly while staying on the same page

I have implemented a feature that allows me to change the category of photos without having to leave the page and it works perfectly. My next goal is to create a button system where the pre-defined category of a photo is indicated by a button with a green ...

javascriptjquerycssforms

Issue with event.stopPropagation() in Angular 6 directive when using a template-driven form that already takes event.data

I am currently developing a citizenNumber component for use in forms. This component implements ControlValueAccessor to work with ngModel. export class CitizenNumberComponent implements ControlValueAccessor { private _value: string; @Input() place ...

javascriptangularhtmltypescript

css malfunctioning user interface

I'm struggling to figure out how to design a CSS toolbar. My goal is to create a 22x22 button toolbar with 4 buttons. I have this PNG image: and the following code: <style> #nav {background: url(content/images/crtoolbar.png) no-repeat;height: ...

htmlcss

Is there a way to retrieve a data value with this specific code?

I have successfully used the code below to send data to the server. However, I am now wondering how to retrieve the values of the data once the server sends back the name and surname of a person. I would like to display an alert message showing these val ...

javascriptjqueryajax

Is there a method to introduce a line break for each piece of data that is shown?

I am currently working with an array and have successfully displayed it on the screen. My inquiry is whether it is feasible to insert a line break for each of the data points it presents. { name: "cartItems", label: "Product Name ...

javascriptreactjsmaterial-uimui-datatable

Exploring the Validation of POST Requests with JSON Content

When working with NodeJS and Express 4, I often come across situations where the client sends JSON data that needs to be processed: { "data" : "xx" "nested" : { field1: "111", field2: "222" } } However, on the server side, I ...

javascriptjsonnode.jsvalidationexpress