On a website I'm working on - https://bi-impro.si - on the front page there is a gif background image you can see when you access the website. That gif is a big file, so I converted it to .mp4, uploaded the video, in elementor chose the video background option, and pasted the link to the video (https://bi-impro.si/wp-content/uploads/2021/12/prstki_mp4.mp4). But the video does not load when I test the website, it just shows the grey area. I added the "background fallback" option of a mentioned gif image, but I want to use the .mp4 image file because it loads faster.
If I see correctly, in page source code there are these lines:
<section class="elementor-section elementor-top-section elementor-element elementor-element-afa0f47 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default elementor-section-items-middle" data-id="afa0f47" data-element_type="section" data-settings="{"background_background":"video","background_video_link":"https:\/\/bi-impro.si\/wp-content\/uploads\/2021\/12\/prstki_mp4.mp4","background_video_start":0,"background_video_end":10,"background_play_on_mobile":"yes","background_play_once":"yes"}">
<div class="elementor-background-video-container">
<video class="elementor-background-video-hosted elementor-html5-video" autoplay muted playsinline></video>
</div>
<div class="elementor-background-overlay"></div>
But I see no problem with that code. I'm not a web programmer, I just use Elementor to build this website.
On the particular page, you want to add the video, you'll notice there's no src attribute, that's why there's no video.....
Temporary fix, add a script tag on the page and add this.... with "xyz.mp4" = video name
document.addEventListener("DOMContentLoaded", () =>{
document.querySelector('#intro-video video').src = "xyz.mp4;
})
Related
Newbie to programming here! I'm completing a project with pretty basic HTML/CSS files, and I'm using Atom as my editor. Both the HTML and CSS files are validated with no errors, and the page can be previewed fine in both Atom HTML preview, and in Chrome.
I have two images in the HTML file that I uploaded to Flickr so that I may submit my project for review via CodePen. When I plug in the new img src code for CodePen, they show up as broken image links.
For example, the below code works fine in Atom HTML as well as Chrome browser Preview (using upticks instead of brackets for ease of viewing post):
'img src="lizatdesk.png" class="image" alt="graphic of Liz sitting at her desk"'
And this is my link assigned by Flickr and plugged into CodePen - results in a broken link (using upticks instead of brackets for ease of viewing post):
'img src="https://flic.kr/p/QFZVZp" class="image" alt="graphic of Liz sitting at her desk"'
Can someone help?
https://flic.kr/p/QFZVZp does not point to an image. It points to an HTML page. To show a photo stored on Flickr you must use the URL of the photo; see this FAQ. In your case, that's https://c1.staticflickr.com/1/255/31957771213_4ed09e18b1_o.png. And per the Flickr terms of use you must also provide a link back to Flickr.
I have a phpBB board that permits uploads of video along with media. I want to modify an existing phpBB extension for Fancybox, that will permit me to mix media types in a Fancybox gallery.
As a first step, I made a simple page that uses Fancybox to mix media types in a gallery:
http://www.59plymouth.net/fancybox/fancybox.html
I want to fix the following issues with it:
I don't want it to autoPlay (although, when I add the autoPlay :
false attribute, it has no effect;
The video controls within the iframe are inaccessible;
I see the Youtube video uses the fancybox-media class, and the controls are accessible - but using the fancybox-media class instead of iframe drops it from my gallery;
The Fancybox frame for the video is much larger than the video
itself - I'd like it to autosize, just as with the images.
Any help? Thanks in advance...
Dan
Hi I am redesigning my website, I am a novice at JS and CSS, pretty good with HTML 5. I am working on a new responsive web site with a gallery page of images using Lightbox.
The Beta Site and Gallery Page is here:
http://www.sound-enclosures.com/FanAir/index-3.html
I have a Link to " img src= " to the Thumbnail and a "a href= " to the BIG Image.
Problem is only One of Four Images load. It's the First Image on the Page The Blue Picture. This seems to work correctly. The other Images try to link, however they just Hang Up on Loading. I have verified the file names, locations, checked the URL's etc.
I am using Lightbox.min. script before "/head" and bootstrap.min.js at the bottom of my page before "/body"
The Monster Template I am using was furnished with jQuery v1.11.1,
I have read in the Stackoverflow Forums that JQuery 1.8 seems to work better with Lightbox, I have not tried that and would be reluctant to do so as it might mess up other pages.
Can any one take a look and possibly provide some assistance, guidance?
Thank you all in advance.
Scotty
Your images do not load because they are either not on your server or not in the folder images
There is no image named: page4_pic15_Big.jpg that is set as your href:
<a href="images/page4_pic15_Big.jpg" data-title="Heavy Duty Centrifugal Blower" rel="lightbox"> <img src="images/page4_pic15.jpg">
Backward Inclined Blowers<br>
</a>
I have an image surrounded by a link:
<img src="image.png">
I want to open this link in a new window, like what I found in this site: http://www.licensario.com/
You recognize it by the play button that it has. Press on it and an inline windows will appear.
I think they using jquery-youtube-tubeplayer, but I'm not sure.
According to the source of the mentioned website, they using LightBoxMe for the inline window, which is a jQuery plugin in combination with TubePlayer (and here). On each website is written how to use these scripts.
The images on my e-commerce website are watermarked with an aspx script, therefore when you are browsing products, if you want to save the image it saves it as aspx rather than jpg or png. The thing is I need to give urls of jpg for a website that advertises products. There are more than 10,000 products so I can't save all of them manually, so I made a page with jquery that get's the image part of the product display page. What this page returns is this:
<div id="result"><div id="loadpic" style="width: 160px;">
<img border="0" src="http://11.11.11.11/img/picsel.aspx?code=IPHONE-32GB-4">
</div></div>
And the output is only an image. How can I return this image not as an aspx page but as a jpg or png? Since there's a script for watermarking the image and making it aspx, shouldn't there be a reverse function?
The image is a jpg/png (depending on the mime type) regardless of the extension. Without knowing more about how you are saving the images, I can't give more of an answer, but you should be able to just save the image and change the extension. If you are doing the equivalent of File>Save, then you are saving the whole HTML (the divs, img tag, etc)