I use the video as a background. The background works well everywhere except the iPhone. I deleted the audio track, but it does not help. How can I play video on iPhone?
PHP CODE
<!-- BACKGROUND VIDEO LAYER -->
<div class="rs-background-video-layer"
data-forcerewind="on"
data-volume="mute"
data-videowidth="100%"
data-videoheight="100%"
data-videomp4="/wp-content/themes/SCALE/wp-content/uploads/2016/03/Working.mp4 "
data-videopreload="auto"
data-videoloop="loopandnoslidestop"
data-forceCover="1"
data-aspectratio="16:9"
data-autoplay="true"
data-autoplayonlyfirsttime="true"></div>
It seems that while the autoplay restriction is lifted for non-audio videos, if you have it in other versions there could be a conflict. You could try adding the property 'muted' or try the workaround suggested here: Can you autoplay HTML5 videos on the iPad?
Try to resize and compress your video to 7mb, then it may start to play.
It helped me, and for desktop I kept full video length.
Related
For long time I use this "replace function" to get the thumbnails by Instagram API, it worked well but now they changed somethings and I no longer to use bigger thumbnails by this way.
src="<?= str_replace('s150x150/', 's320x320/', $post->images->thumbnail->url) ?>">
By default thumbnail, it works well.
https://scontent.cdninstagram.com/vp/94387bd7b8a247f3f4039f8789772142/5AEE2A9E/t51.2885-15/s150x150/e35/c0.135.1080.1080/26335890_2247807142112483_5882778660510892032_n.jpg
But replaced thumbnail size to bigger, it appears a msg: Invalid URL signature.
https://scontent.cdninstagram.com/vp/94387bd7b8a247f3f4039f8789772142/5AEE2A9E/t51.2885-15/s320x320/e35/c0.135.1080.1080/26335890_2247807142112483_5882778660510892032_n.jpg
Anyone can help to get bigger thumbnail of Instagram. They changed API and I feel so tired with Facebook, they have made many changes since sync with FB and everytime like this, the developers have to update with no instructions.
You can try with this trick
src="<?= str_replace('s150x150/', 's320x320/', str_replace('vp/', '', $post->images->thumbnail->url)) ?>">
or
src="<?= str_replace('s150x150/', 's640x640/', str_replace('vp/', '', $post->images->thumbnail->url)) ?>">
You have to replace (delete) also "vp/" on url, and works again.
It's a really bad solution, but it's the only that i've found.
Copy the link of the profile pic after the "/s150x150/xxxxxxxx......jpg" to the end of this:
"https://instagram.flju2-1.fna.fbcdn.net/vp/e890a9f0b7b40abe5667b06d0fa750e5/"
like: https://instagram.flju2-1.fna.fbcdn.net/vp/e890a9f0b7b40abe5667b06d0fa750e5/xxxxxxxx......jpg
Works right now.
A solution would be very nice!
I have also done it like you the last few month.
I think one of the solutions is to use non-squared fotos from instagram (you get with "standard_resolution") and set it as a background-image and do the "square" via css and display cover…
This is my personal solution at the moment…
i opened instagram on google chrome selected the desired post, right-clicked to "save as". after opening the saved html doc. in chrome i right-clicked again to veiw page source. i scrolled down to line 217 of the page source and one of the links there gave me the picture i wanted. not sure that it is the same thing as before but it let me download the picture of the post in a .jpg format. hope this helps
Hi so I added a video into the front-page.php code using the following code:
<div style="text-align: center" id="video">
<iframe width="867" height="488" src="https://www.youtube.com/embed/6c7Fx2PR9Dk" ></iframe></div>
(sorry for some reason the code editor is not working)
however when I try to change the width and height in the mobile mode using #video, it does not change. any help is appreciated!
EDIT: I added a class=container and changed the width to 100% and height to auto. This worked a little better but now the height of the container needs to be bigger. I cannot seem to find where to add the code to edit it.
I cannot see your code but I am sure it would be way easier to achieve this using CSS and media queries. Assuming your video player is configured to take 100% of the width of the container it sits in.
Actually you have to use the following cass to make it full width
#video iframe {
width:100%!important
}
Fitfids.js is really nice plugin to make the iframe, video embeds responsive. You may try to use that for your ultimate video responsive solution.
I'm desperately (hours of research and no luck so far) trying to create a PHP page which can be used as a path for video embedding. I'm doing this so that I can give out a path to 3rd parties, that they can use for embedding, which won't change, even if I have to host the video elsewhere.
I've tried using the code referenced here...
Reading mp4 files with PHP
... but it doesn't work at all for me.
The video files will be hosted on a CDN and 3rd parties will need fixed links that they can embed on their own sites like:
<div data-swf="$resourcePath/resources/flowplayer.commercial-5.4.3/flowplayer.swf" class="flowplayer is-splash play-button" data-ratio="0.5625">
<video>
<source type="video/mp4" src="http://www.mycdndomain.com/embed/loader.php?v=1"/>
</video>
</div>
Thanks in advance.
-Josh
I've been trying to display a gif image using PHP and have not found a solution to my problem with the research I've done. I know I can display image in HTML/CSS, but I need to use php in this case.
<html>
<?php
$img = imagecreatefromgif("http://www.mysite.com/images/timer.gif");
?>
<img src="<?= $img ?>" alt="timer" />
</html>
That code resides in a php doc on my server. I can tell the code is working because an icon of a torn image displays on my site, and when I attempt to save the torn icon image to desktop, the automatic file name appears as "Resource id.html"?
I read somewhere that creating gifs with Photoshop CS5 (as I did) uses a different frame separator sequence, \x00\x21, instead of the official standard \x00\x2C. The guy then said he uses pattern "#\x00\x21\xF9\x04.{4}\x00(\x2C|\x21)#s" to bypass that issue but I have no idea how/where to implement that or if that is even my issue (tried a different gif from internet and had same display problem). Thoughts? Thank you.
Imagecreatefromgif() returns an image resource, which you can't use in this way.
Have your PHP script output the image data, with the correct headers (see example here http://php.net/manual/en/function.imagecreatefromgif.php).
Then you can call your script just like you would any other image:
<img src="http://www.mysite.com/images/generate_image.php" alt="timer" />
I embed videos into my web site, works great in all browsers but on firefox shows up a black screen, any idea? Using the iframe mode. Funniest thing is that some show up and some don't using the same embed method for all.
rob.m - yup, showing and hiding vimeo videos will cause that random black screen to appear. I JUST ran into this on a project, and tore my hair out for the better part of a day figuring out why.
If you NEED to show/hide videos, and you NEED the black screen to not show up, you will have to use the old school flash embed. That will work.
It's a trade off - consistent embed images = flash OR inconsistent embed images = universal method (read: HTML5 w/ flash fallback).
[Brief rant: the Vimeo API documentation leaves a LOT to be desired]
If you need to further interact with these videos that you show/hide, and plan to use the Vimeo API to do so, I found that I had to use the SWFobjects library method. See this forum post for more: http://vimeo.com/forums/topic:44521 - specifically, the second to last post.
Eventually i came up with using this:
In the main page I have a element which i then populate and replace with the iframe. Thanks
Main page:
<span class="video clearfix" data-vimeoid="<?php echo the_field('vimeo') ?>"></span>
Content page to be loaded:
var url = this.href + " .content";
var videoSpan = infoBox.find("span.video");
var iframe = $('<iframe/>', {
'frameborder' : 0,
'width' : '692',
'height' : '389',
'src' : 'http://player.vimeo.com/video/'+ videoSpan.data("vimeoid") +'?autoplay=0&api=1'
});
videoSpan.replaceWith(iframe);