I'm trying to embed a PDF and make it scrollable in Firefox (bonus points for the ability to zoom in/out, but right now I'd just be happy with a simple functional solution).
Basically my code is as follows:
<div class="row-fluid align-center">
<div class="span12">
<iframe style="float:none;display:inline;height:90%;" src="{{url}}" frameborder="0"></iframe>
<br>
</div>
</div>
<div class="row-fluid">
<div class="span11">
<button onclick = "history.go(-1);" class="pull-right btn btn-primary" type="submit">Go Back</button>
</div>
<br><br>
</div>
However, I noticed on Firefox that it simply prompts me to download the PDF file rather than embed it. Meanwhile, my users say it embeds in their browser, but it's sized very small.
How do I make it embed full-screen in Firefox?
On Safari/Chrome, it's fine. On iPad it only shows the first page of the PDF and it's not full-screen.
The solution was that I added a height parameters in absolute pixels, rather than a percentage.
<div class="row-fluid align-center">
<iframe class = "span12" style="float:none;display:inline;height:1200px;" src="{{url}}" frameborder="0"></iframe>
<br>
</div>
Related
All that it displays when I click on it is black background.
Here is my code:
<div class="cbp-item art illustration">
<a class="cbp-caption cbp-lightbox" data-title="Abstract Art Museum" href="https://www.youtube.com/embed/watch?v=LnwPD69Fbh4"> <div class="cbp-caption-defaultWrap">
<img src="assets/images/portfolio/masonry/art.jpg" class="portfolio-thumbnail" alt="" >
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="cbp-l-caption-title">3D Abstract Museum</div>
<div class="cbp-l-caption-desc">Video</div>
</div>
</div>
</div>
</a>
</div>
I tried to change URL and use embed code. I also tried to research more on it but it kept on showing lightbox for images with code that had modal involved in it. I have seen this code work before without the use of modal but I feel like something else is missing.
The image on my webpage is not properly aligned with the video for some reason. It looks like this: This is the image on my webpage
When I try to shift the picture up, it still does not align properly and jsut shifts everything up. How can I properly align the image and the video.
Here is my code so far:
<div class="col-md-9">
<div id="page-1" class= "page one">
<h2 class="heading">Projects</h2>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">Feb 2020</span>
<h2>CLARITY - NSBE Hacks UofT</h2>
<span class="position"> First place winner and winner of best Google hack</span>
<p> Clarity is a web app catered towards children that struggle with autism. Children with autism have trouble recognising the emotions of other people. Our application listens peoples speech and analyzes the emotions being conveyed in said speech. After the analysis, recommendations are given to the user on how to navigate the situation, in an attempt to make navigating social situations easier. </p>
<img src="/static/images/clarity.png" height = 200px width = 250px>
<video width="300" height="300" controls>
<source src= "/static/video.mp4" type ="video/mp4">
</div>
</div>
Try encapsulating the image and video within their own Bootstrap div. Something like this:
<div class="md-col-6">
<img src="/static/images/clarity.png" height = 200px width = 250px>
</div>
<div class="md-col-6">
<video width="300" height="300" controls>
</div>
This will force the image and video to remain in two columns, and most likely line up with each other. I'd also recommend inspecting the element to see if any padding or margins are causing the misalignment.
I have a 'big' problem with iframe. I had to make an iframe inside a container div witch has a Bootstrap modal inside. everything is working fine on desktop (Chrome, firefox, safari etc.)but on tablets, when i call the open function for the modal, it is remove every other content except the iframe.
here is the html code:
<div class="content">
<div class="container-fluid header">
<div class="container">
<div class="row">
<!-- SOME HTML CODE HERE-->
</div>
</div>
</div>
<div style="clear: both;"></div>
<iframe src="/game/" width="100%" height="786" style="border: none" id="table-1"></iframe>
</div>
The iframe is an html document too, and i know that i souldn't had to use it for this, but thats what they want me to do.
I am sending a html built email body..
Is there a way to display an alternate text while the images are not yet loaded?
I tried overlapping two divs with img and text, it is working but the problem is that the broken-image icon is showing.
<div style="width:100%;min-height:50px!important;text-align:center;background-color:#eee;border-bottom:solid 2px #aaa">
<div style="min-height:10px"> </div>
<div style="min-height:30px">
<div style='width:200px;margin:0 auto;'>
<a href="http://google.com" target="_blank">
<div style='position:relative;'>
<div style='position:absolute; height:30px;width:200px;z-index:1000;'>
<img height="30" width="200" alt="View Presentation" src="http://www.clker.com/cliparts/X/1/Q/v/b/2/green-button.svg">
</div>
<div style='position:absolute;height:30px;width:200px;background-color:#EEE;'>
Click here to view
</div>
</div>
</a>
</div>
</div>
<div style="min-height:10px"> </div>
</div>
Kindly see my work here..
http://jsfiddle.net/msvillanueva/aYuAd/1/
This jQuery plugin can help you
http://www.appelsiini.net/projects/lazyload
Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading.
Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.
On this page an embedded YouTube video is displayed to the left of a carousel titled "Similar Festivals". The HTML used to embed the YouTube video is:
The HTML of the YouTube section is:
<div class="span4 spacer youtube">
<div class="title clearfix">
<h2 class="pull-left">YouTube</h2>
</div>
<iframe width="1000" height="1000" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>
</div>
The layout of the page (using a responsive Bootstrap grid) is such that the video should have the same height as the carousel to the right of it, but as you can see, it is somehow breaking out of its parent container. I want the video to be aligned with the carousel to its right, how can I fix this.
Here's a screenshot in case there's any doubt about what I'm referring to!
I've noticed that row-fluid container is dynamically adding a width of 33% to your Youtube video. So whatever width expectation you set to it is being reset by that class.
Try this:
<div class="row-fluid">
<div class="span4 spacer twitter">
</div>
<!-- Youtube -->
<div class="span4 spacer youtube">
<div class="title clearfix">
<h2 class="pull-left">YouTube</h2>
</div>
<iframe height="150px" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>
</div>
<!-- Similar Carousel -->
<div class="span4 spacer">
<div id="similarCarousel" class="carousel slide last">
</div>
</div>
</div>
(hat tip to Mr. Alien)
It sets the iframe height only. The whole row-fluid container expands somewhat, and the height is irregular. However, you don't have the 'jumping outta the container' problem.
Instead of
<iframe id="fitvid811516"
src="Festivals.ie%20_%20Electric%20Picnic%202012_files/NI8rQEHoE24.htm">
</iframe>
Use this
<iframe width="640" height="360"
src="http://www.youtube.com/embed/NI8rQEHoE24?feature=player_detailpage"
frameborder="0" allowfullscreen>
</iframe>
And adjust width and height manually. Iframes don't go along well with dynamic sizing.
Also if you don't want to break the layout but also don't want to change the content within, you can also go to the parent container in HTML and set overflow: hidden
.fluid-width-video-wrapper {
overflow:hidden;
}
Note that this would fix your layout but break the iframe; its bottom parts where play controls stay would be hidden.