Is there a way to embed a facebook video and have sound start on play on non mobile devices?

This may sound simple but I'm just trying to embed a facebook video (preferrably via iframe but can use SDK method) and have it so when the visitor hits play the video plays with sound. Every video I've played on laptops the video is muted (tried chromebook and Windows computer, various browsers, none has sound unless visitor unmutes it).

This may sound simple but I'm just trying to embed a facebook video (preferrably via iframe but can use SDK method) and have it so when the visitor hits play the video plays with sound. Every video I've played on laptops the video is muted (tried chromebook and Windows computer, various browsers, none has sound unless visitor unmutes it).

However if I play on a iphone the sound plays as one would expect.

I've tried both the SDK and Iframe method and don't know how to get the sound on when someone hits play.

Here's a jsfiddle: https://jsfiddle.net/8vgoqf2k/

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FPretty52Official%2Fvideos%2Fvb.217293018312810%2F468824230316244%2F&width=500&show_text=false&appId=115391488481724&height=500" width="500" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>

On other platforms youtube, soundcloud, etc, the default behavior is for sound to be on when someone hits play. But not facebook (unless it's a phone).

HTML video tag - change source on viewport without media attribute

I'm trying to implement a video in HTML with react. So if the viewport is under 750px width, I would like to change the video source to a smaller resolution/ smaller file (because of high data transfer and so on).

I'm trying to implement a video in HTML with react. So if the viewport is under 750px width, I would like to change the video source to a smaller resolution/ smaller file (because of high data transfer and so on).

So in a perfect HTML world, you would build this:

<video controls> 
   <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 750px)"> 
   <source src="video.mp4" type="video/mp4"> 
</video>

Since media is not (or no more) specified in the source tag if it's inside of a video tag, I can't use this anymore. Because Chrome is displaying the first source, which is the mobile video. No matter if desktop or mobile.

Second solution was to wrap a container around and set display: none; to the not visible video:

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import LazyLoad from 'react-lazyload'

const MobileVideo = styled.div width: 100%; height: 100%; object-fit: cover; display: none; ${({theme}) =&gt; theme.media.mobile
display: block;
}

const DesktopVideo = styled.div width: 100%; height: 100%; object-fit: cover; display: block; ${({theme}) =&gt; theme.media.mobile
display: none;
}

const VideoComponent = ({
srcWebm,
srcMp4,
mobileSrcWebm,
mobileSrcMp4,
poster,
className,
forwardedRef,
...rest
}) => (
<React.Fragment>
<MobileVideo>
<video
playsInline
poster={poster.url}
className={className}
ref={forwardedRef}
{...rest}
>
{mobileSrcWebm.url !== '' && (
<source src={mobileSrcWebm.url} type="video/webm" />
)}
{mobileSrcMp4.url !== '' && (
<source src={mobileSrcMp4.url} type="video/mp4" />
)}
</video>
</MobileVideo>
<DesktopVideo>
<video
playsInline
poster={poster.url}
className={className}
ref={forwardedRef}
{...rest}
>
{srcWebm.url !== '' && <source src={srcWebm.url} type="video/webm" />}
{srcMp4.url !== '' && <source src={srcMp4.url} type="video/mp4" />}
</video>
</DesktopVideo>
</React.Fragment>
)

In this case the correct video is displayed, but both videos are downloaded (in Chrome). Hiding doesn't prevent the browser from downloading. SAD!

Third solution was to use the second solution and remove the invisible component from the DOM:

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import LazyLoad from 'react-lazyload'

import {sizes} from '../../lib/ThemeProvider/media'

const MobileVideo = styled.div width: 100%; height: 100%; object-fit: cover; display: none; ${({ theme }) =&gt; theme.media.mobile
display: block;
}

const DesktopVideo = styled.div width: 100%; height: 100%; object-fit: cover; display: block; ${({ theme }) =&gt; theme.media.mobile
display: none;
}

class VideoComponent extends React.Component {
state = {
showMobileSrc: true
}

componentDidMount() {
this.resize()
window.addEventListener('resize', this.resize)
}

componentWillUnmount() {
window.removeEventListener('resize', this.resize)
}

resize = () => {
if (window.innerWidth >= sizes.mobile) {
this.setState({ showMobileSrc: false })
} else {
this.setState({ showMobileSrc: true })
}
}

render() {
const { srcWebm,
srcMp4,
mobileSrcWebm,
mobileSrcMp4,
poster,
className,
forwardedRef,
...rest
} = this.props
const {showMobileSrc} = this.state
return (
<React.Fragment>
{showMobileSrc && <MobileVideo>
<video
playsInline
poster={poster.url}
className={className}
ref={forwardedRef}
{...rest}
>
{mobileSrcWebm.url !== '' && (
<source src={mobileSrcWebm.url} type="video/webm" />
)}
{mobileSrcMp4.url !== '' && (
<source src={mobileSrcMp4.url} type="video/mp4" />
)}
</video>
</MobileVideo>}
{!showMobileSrc && <DesktopVideo>
<video
playsInline
poster={poster.url}
className={className}
ref={forwardedRef}
{...rest}
>
{srcWebm.url !== '' && <source src={srcWebm.url} type="video/webm" />}
{srcMp4.url !== '' && <source src={srcMp4.url} type="video/mp4" />}
</video>
</DesktopVideo>}
</React.Fragment>
)
}
}

But chrome is downloading both videos anyway. HTML seems to be correct. No idea what chrome is doing there..

First i really don"t understand why they removed the media attribute from the source tag inside of a video tag. Thats not consistently implemented.

Anyway: How can I change the source at a defined viewport width and prevent downloading both videos?

Download Instagram videos and photos using HTML, CSS and JavaScript

Download Instagram videos and photos using HTML, CSS and JavaScript

How can we download Instagram videos and photos using the HTML CSS JavaScript program? Solution: See this JavaScript Instagram Media Downloader. In other words, Program For Save Instagram Photos & Videos

Previous I have shared JS Random Password Generator for social media, but this is for download Instagram’s media. Basically, Instagram is the largest media sharing social platform in the world. And our idols and favorite celebrities are on this network. Sometimes we like any photos or videos and want to save it offline but, we can’t save or download Instagram media directly. Then we have to go a third-party website for download media, but we can create a program for that work.

Today you will learn to create a program for Save Insta Photos & Videos. Basically there is a text input field, a button, and a dummy image. When you will put a valid Instagram photo or video linked to the input field and click on the button then the image will visible by replacing the dummy image. After the image appearance, you click save it by right click on the mouse.

So, Today I am sharing JavaScript Instagram Media Downloader. This program is completely based on JavaScript, no other libraries used in there. The program getting the image or video and shows on the page and you can save it locally. Peoples search for Instagram downloader, you can take this script and use it your website to getting visitors.

If you are thinking now how this Instagram downloader actually is, then see the preview given below.

JavaScript Instagram Media Downloader Source Code

Before sharing source code, let’s talk about it. First I have created a header and a section using HTML. The header for placing the blank input and the button and the section for showing the image and massage. Also in the HTML file, I have linked the other files like JavaScript and CSS. HTML has very little part in this program, it just creating the layout and frame of the program.

Now using CSS, I have placed all the elements in the right place, as you can see in the preview. I just styled the header section and input fields, also I placed a dummy image in the image section by default. This a responsive design, for creating that I have used CSS @media query and resize the elements according to small screen size.

JavaScript doing here the main work of the program, the whole program is based on JS. There I have used JavaScript const statement in the whole program (info). There I have created 3 sections of codes, first for getting video, second for getting the image, and third for the printing media like photos and videos. In the JS file, I left comments on every section for easy understanding.

Left all other things you will learn after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the third one for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Instagram Downloader | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <header class="navbar">
      <input type="text" value="" placeholder="Paste link here...">
      <button class="search" onclick="getMedia()">Get</button>
    </header>
    <section class="result">
      <div class="image-placeholder"></div>
      <p> Copy image or video link from Instagram and put it on the field given on the top. </p>
    </section>
  </main>
  
  <script  src="function.js"></script>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

* {
  box-sizing: border-box;
}
html, body {
  position: relative;
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  font-family: "consolas",monospace;
  font-size: 14px;
  line-height: 1.5;
  background: #f9f9f9;
  color: #333;
}
code {
  background: #208bfd;
  color: #f9f9f9;
  padding: 0.1em 0.5em;
  border-radius: 4px;
}
.image-placeholder {
  margin: auto;
  width: 89%;
  max-width: 500px;
  display: block;
  height: 380px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url(https://webdevtrick.com/wp-content/uploads/image-placeholder.png);
}
@media (max-width: 420px) {
  .image-placeholder {
    width: 320px;
    max-width: 320px;
    height: 280px;
    background-size: contain;
    background-position: top left;
    background-attachment: scroll;
  }
}
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4em;
  background: #208bfd;
  margin: 0 auto;
  text-align: center;
  color: #f9f9f9;
}
::placeholder {
  color: #212121;
}
input {
  display: inline-block;
  width: 100%;
  max-width: 50%;
  max-width: calc(100% - 8em);
  min-height: 2.8em;
  padding: 0.5em;
  margin: 0.5em 0;
  background: #f3f3f3;
  border-color: #208bfd;
  border-width: 1px;
  color: #212121;
  transition: all 500ms ease;
}
input:focus, input:hover {
  border-color: #208bfd;
  transition: all 500ms ease;
}
 
@media (min-width: 420px) {
  input {
    max-width: 50%;
  }
}
.search {
  display: inline-block;
  padding: 0 1em;
  text-align: center;
  min-width: 2.8em;
  height: 2.8em;
  margin: 0;
  background: #208bfd;
  border: 2px solid #212121;
  color: #f9f9f9;
  transition: all 500ms ease;
}
.search:focus, .search:hover {
  background: #212121;
  border-color: #f9f9f9;
  cursor: pointer;
  transition: all 500ms ease;
}
.result {
  margin: 0 auto;
  padding: 4em 1em;
  max-width: 40em;
}
.result video, .result img {
  width: calc(100% - 4em);
  margin: 2em;
}
.result .download {
  text-decoration: none;
  display: inline-block;
  padding: 0.5em 1em;
  background: #208bfd;
  border-color: #208bfd;
  border-width: 1px;
  color: #f9f9f9;
  transition: all 500ms ease;
}
.result .download:focus, .result .download:hover {
  background: #208bfd;
  border-color: #f9f9f9;
  cursor: pointer;
  transition: all 500ms ease;
}
@media (max-width: 600px) {
  .result {
    position: absolute;
    top: 4em;
    left: 0;
    right: 0;
    height: calc(100% - 10em);
    overflow-y: auto;
    max-width: 40em;
    background: #f9f9f9;
    margin: auto;
  }
}
footer {
  width: 100%;
  margin: 2em auto;
  text-align: center;
}
 
@media (max-width: 600px) {
  footer {
    position: absolute;
    bottom: 1em;
    left: 0;
    right: 0;
    height: 2em;
  }
}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

const _ = e => document.querySelector(e);
const render = _('.result');
 
 
// create video
const createVideo = data => {
  let v = document.createElement('video');
  v.id = "instavideo";
  v.src = data.content; 
  v.controls = true;
  v.autoplay = true;
 
  // create info
  let info = document.createElement('p');
  info.textContent = "Click the right button on video and select save as.";
 
  render.innerHTML = ""; 
  render.appendChild(v);
  render.appendChild(info);
};
// create image
const createImg = data => {
  // create image
  let i = document.createElement('img');
  i.id = "instaImg";
  i.src = data.content;
 
  // create info
  let info = document.createElement('p');
  info.textContent = "Click the right button on the image and select save image..";
 
  render.innerHTML = ""; 
  render.appendChild(i); 	
  render.appendChild(info); 
 
};
 
// extract html
const getMedia = () => {
  render.innerHTML = "<div class='image-placeholder'></div>";
  // get input value
  let url = _('input').value;
  if (url) {
    fetch(url).
    then(r => r.text()).
    then(r => {
      // render html
      render.innerHTML = r;
      // wait, find meta and create video or image
      let w = setTimeout(() => {
        let v = _('meta[property="og:video"]');
        if (v) {
          createVideo(v);
        } else {
          let img = _('meta[property="og:image"]');
          if (img) {
            createImg(img);
          } else {
            document.body.innerHTML = body;
            alert('Error extracting Instagram image / video.');
          };
        }
        clearTimeout(w);
      }, 200);
    });
  } else {
    _('input').setAttribute('placeholder', 'Invalid address, use a proper Insagram link');
 
  }
};

That’s It. Now you have successfully created JavaScript Instagram Media Downloader, Save Insta Photos & Videos Program. If you have any doubt or questions comment down below.

Thanks for reading. I'm highly appreciate your actions! Please share if you liked it!