I want to remove the title from an embedded video in my Laravel Blade template, marked with orange color in the picture. That video may be a youtube video or any video from other websites.
Here is my code
<div class="embed-responsive embed-responsive-16by9" style="width:300px;height: 100px; margin:0px 50px 30px 0px;">
{!! Embed::make($data->links)->parseUrl()->getIframe() !!}
</div>
showinfo=0 is not help here cause may be it can't a youtube video.
Is there a way to add any code inside {!! Embed::make($data->links)->parseUrl()->getIframe() !!} or any solution ?
Related
I've a play-button inside Image. Onclick it shows youtube video in light-box. I just replaced youtube video with my own video from video directory that is under public folder. When i click on play button, it returns below error.
blade.php
<div class="container">
<div class="col-lg-5 order-2 order-lg-1 align-items-stretch video-box" style='background-image: url({{URL::asset('src/img/product3.png')}})' data-aos="zoom-in">
</div>
</div>
When I changed my anchor tag with video, it open light-box but still video is not playing, just loading..
<video src="{{URL::asset('src/video/Car-Chain Product 2 ENG.mp4')}}" class=" play-btn" data-vbtype="video" data-autoplay="true"></video>
How can I resolve this please?
I'm sending an email from my laravel application via Mailgun. I'm using the embed function so that the image's will showing Gmail as it blocks images but now im running into a problem with Apple Mail, if I set the image width and height it ignores this and shows the image at its true file size. So if I have an image with the width and height of 100px and set the width and height as 50px in my email Apple Mail ignores it but Gmail shows it as 50px as expected. Any work around for Apple Mail? Apple Mail shows it as the correct size when not using the embed feature in Laravel.
<img src="{{ $message->embed(public_path() . '/img/mail/logo.png') }}" width="22" height="22" style="max-width: 22px;-ms-interpolation-mode: bicubic;vertical-align: middle;border: 0;line-height: 100%;height: auto;outline: none;text-decoration: none;" />
Thanks in advance!
-Jamie
Change your code, do not use width and height attribute in tag. Use in style. I hope this will solve your problem.
<img src="{{ $message->embed(public_path() . '/img/mail/logo.png') }}" style="width:22px; height:22px; max-width: 22px;-ms-interpolation-mode: bicubic;vertical-align: middle;border: 0;line-height: 100%;height: auto;outline: none;text-decoration: none;" />
I am using laravel and trying to make it possible for users to change the background image of their page using an update form. They upload a pic and the pic is displayed using twig. My code below for getting the user image used for the background pic
$this['userprofile'] = User::with('background_pic')->where('id', $slug)->first();
The background pic is to be rendered in a div using the code below
<div align="center" style="height: 30px; background-image: url('{{ userprofile.avater.path }}');"></d>
the image uploads fine to the backend but not sure how to display it in twig. using the above background-image: url('{{ userprofile.avater.path}}') does not work
In order to render the background-image url from a variable you need to use the asset function.
This twig function resolves the path of your image to a publicly accessible URL.
Example usage:
<div style="background-image: url('{{ asset(userprofile.avater.path) }}');"></d>
I have a table cell that includes an image that should be 50% of the cell's width.
The code works in Chrome, Firefox, and Edge, but in IE11 instead of taking on 50% of the cell's width, large images just take on 50% of their native size.
Here is a fiddle using a 800px wide image. Works fine except in IE11, where the image displays as 400px wide instead of responsive:
https://jsfiddle.net/43Tesseracts/9knqerj7/4/
Here is the relevant html with bootstrap:
<td>
<img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images-2.jpg"
style="max-width:50%;"
>
The image beside me should appear 50% of the cell, not 50% of it's native size. WOorks in Chrome, FF, Edge, but NOT IE 11
</td>
There appear to be many similar issues on SE, but they are all much older, or use an older version of Bootstrap. I'm using Bootstrap 3.3.7
there is no need for extra div's. you can set the following css property on the table element:
table{
table-layout: fixed;
}
i updated your fiddle with a working example:
https://jsfiddle.net/9knqerj7/10/
(in addition, i changed the img to be a block element and float left, but that is not required for the responsiveness - just looks better IMHO)
You could solve this issue using divs like i did here:
<td>
<div style="display: flex;">
<div style="width: 50%">
<img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images-2.jpg" style="width: 100%">
</div>
<div style="width: 50%">
THe image beside me should appear 50% of the cell, not 50% of it's native size. WOorks in Chrome, FF, Edge, but NOT IE 11
</div>
</div>
</td>
Working solution: https://jsfiddle.net/9knqerj7/8/
I'm currently creating a image gallery (using Zurb Foundation as Framework) and would like to show the zoom icon on image hover (like this example here: http://codepen.io/Twikito/pen/Jeaub). But I would like the icon to be a font (Font Awesome) icon and not just one but 3 individual clickable icons.. Would that be possible?
I've put a quick JSfiddle together using font-awesome. The CSS is hacked together but demonstrates what's possible. It should give you a starting point to experiment with.
<a href="#" title="" class="image">
<img src="http://www.lyricis.fr/wp-content/uploads/2010/04/kickass-film-still-01.jpg" alt="">
</a>
<div class="cn">
<div class="inner">
<i class="icon-zoom-in large"></i>
<i class="icon-cloud-download large"></i>
<i class="icon-comment large"></i>
</div>
</div>
Note: The JSfiddle above uses font-awesome.css called externally from bootstrapcdn.com