In this article we will talk about how to embed a video on a website and learn how to:

Place your files on video hosting sites and display them on the site.

Upload videos to your hosting and display them on the site using the player.

It's no secret that video is becoming an increasingly popular type of content every year. Today, it is no longer easy to keep ordinary users on your website or resource only with the help of beautiful pictures and well-written texts; you need a video that will make their stay on the site even more interesting. Let's move on to the instructions:

How to upload a video to Youtube:

First of all, you need to log into your YouTube account.

Click the Add Video button at the top of the page.

Select a video to download. (Please note that the video must not violate copyright. If you want to add famous music to the video, you will have to buy it).

While the file is downloading, fill in the basic information about the video and, if necessary, additional parameters.

To add a video to YouTube, click Publish.

Until you click the Publish button, the video is only available to you.

With more detailed instructions How to upload videos to Youtube can be found on the support page

Insert a video from Youtube into your website:

To insert an already uploaded (existing) video on Youtube:

We looked at several ways to insert code from videos that have already been uploaded to one of the popular video hosting sites.

Now let's look at the options for playing video with the downloaded video on your server.

Embed video on website using HTML5

For this method you will need a video tag

< span class = "tag" ><< span class = "title" >video< / span >>< / span > < span class = "tag" ><< span class = "title" >source< / span > < span class = "attribute" >src =< span class = "value" >"URL"< / span > < / span >>< / span > < span class = "tag" >< /< span class = "title" >video< / span >>< / span >

Upload the video to the server;

Copy the above code;

We paste the copied code into the part of the site we need;

We change the URL to the path to the file that we placed on the hosting

Save the changes and refresh the page.

There are several attributes for the video tag, and some of them are found in the codes offered by popular video hosting sites.

First of all, I would like to talk about such attributes as height (height), width (width).

With their help, you can adjust the height and width of the area for video playback.

• src is the most important attribute; it specifies the path to the video.
• autoplay - play the video immediately after the page loads.
• loop - repeat video playback upon completion
• poster - specifies the address of the image that will be displayed while the video is not available or playing.
• preload - downloads the video along with loading the web page.

Embed video on website using player

Now there are many different players on the Internet that you can use on your website. As an example, I chose one of the popular flowplayers.

, and then unzip it;

Create a folder and place the files from the archive into it;

Connect the player's javascript file to the html file. To do this, inside the head tag, write the following code:

Be more careful when specifying the path to the file. You can not create a folder, but put the script file in any other folder, for example in a folder with other scripts.

Now let’s place the player itself in the page code and, accordingly, the video file.

< ! -- the player -- > < div data - swf = "flowplayer.swf" data - ratio = "0.4167" > < video > < source type = "video/webm" src = "https://путь к вашему видео файлу если он в формате.webm" > < source type = "video/mp4" src = "https://путь к вашему видео файлу если он в формате.mp4" > < / video >

I already wrote about how to insert your music into . I propose to consider an equally pressing issue - how to insert your own music into mafia 3. By the way, all three parts of the mafia game differ only in the plot and additional characters. But in general the games are very similar. Therefore, as in the second part, you need to download a special add-on program. With its help, you can create your own radio, that is, make your own playlist with songs.

The program is absolutely free. You can download without registration and SMS. Installation takes no more than 5 minutes. Important: after installation, the program may “request” to restart the computer. Don't panic, this is normal! So, how to insert your music into mafia 3: mods for mafia 2, maifa 1 and 3.

How to insert your music into Mafia 3

In order to create your own radio in the third version of the mafia, you need to download the Mafia 2 Music Manager 1.3 program.

One of the important functions of the program: you can listen to songs not only during the game, but also simply by launching the application. By the way, all your playlists are saved. Therefore, there is no need to update the list again.

Perhaps this will be useful to you) Today due to WordPress update

In order to insert a photo onto a website or into the text of an article, first place the cursor at the place in your text where you want to place the photo. Then click the "Add Media" button. It is located between the Article Title and the text editing console (See Figure 1)

(See Figure 1)

In the “Insert media file” window that opens, click the “Upload files” link (see figure 2)

(Figure 2)

In the next window, click the “Select files” button (see Fig. 3)

(see Fig. 3)

An additional window will open in front of you. Prepare in advance the photographs that you want to post on the site and collect them in separate folder on your computer. Through an additional window, enter this folder and select a photo by clicking on the image with the mouse once. If you need to insert all the photos at once, then select them all.

After that, click the “Open” button, which is located in the lower right corner of the additional window (see Fig. 4)

(see Fig. 4)

The selected photo will be uploaded to the site and will be located in the “Media Files” tab and in the future, if necessary, can be loaded into other articles on the site; there is no need to re-upload it from the computer. IN active windows on the right, enter the required information (see Fig. 5):

— in “Title” and “In the alt attribute“ — enter the title of your article.

— in “Description” — type in one sentence what your article is about. The text of the proposal must contain the title of the article (see Fig. 5).

Then click the "Insert into Page" button. If you write text not in the “Page”, but in the “Post”, then you will have a button “Insert into record” - click it.

(Fig. 5)

The photo will appear in the place where you previously placed the cursor. Initially, the photo will not be loaded in the size that will look optimal on the site page (see Figure 6). But this can be easily fixed.

(Fig. 6)

To edit an image, move the cursor over it and left-click once. The image will be covered with a blue background, then click on the image in the upper left corner (see Fig. 7)

(Fig. 7)

After you click on the icon, as shown in Figure 7, you will be taken to the photo editing panel (see Figure 8). Here you also need to enter the necessary information to improve the indexing of the uploaded photo:

— in the “Title” line, enter the title of your article;

— in the “Alt attribute” line — also enter the title of your article;

Then select the location of your image on the site: “Left”, “Right”, “Center” or “None”.

After you enter all the necessary information, click the “Advanced” tab in the top line of the additional window.”

(Figure 8)

On this page you can set the dimensions of the photo, that is, the width, height and distance of the text from the borders of the photo. Set the sizes slightly smaller than the default ones. Then when you look. how the photo will look on the website, the dimensions can be easily changed and the appropriate ones can be set.

In the active box “Open in a new tab”, check the box. If you click on the photo directly on the site, it will open in a new window (see Fig. 9).

(Figure 9)

After you enter all the necessary information, click the “Update” button in the lower left corner of the additional window. That's it, your photo is inserted into the text. In the editor it will look like this (see Figure 10). Click the "Save" button. Before publishing, click the “View” tab and take a look at how the article with photos looks on the site. If necessary, make size adjustments and resave the page. Then click the Publish button.

(Figure 10)

The photo is inserted into the article and looks correct on the website (see Figure 11)

(Figure 11)

If the photo needs to be repositioned not in the middle, but on the right or left (see Fig. 12), then proceed in the following order.

(Figure 12)

Click on the photo and enter the editing panel. Here select “Alignment” “Left” (see Figure 13)

(Figure 13)

Fill in all the necessary data in the same order and click the “Update” button (see Figure 14)

(Figure 14)

After you publish the article, the photo on the site will look like shown in Figure 15.

(Figure 15)

I hope you will not have any difficulties posting photographs and drawings on the site. If you find any inaccuracies or unclear points, please let me know in the comments.

Read the article on this site

Want to know how you can “swap faces” with a friend, relative, or favorite celebrity? The magic of photomontage will help you with this! How it works? Search engines, upon request, will probably offer to use Photoshop, but this program will not be suitable for a non-professional. The best option is a simple one, like a “Home Photo Studio”. In this article, you will learn how to insert another face into a photo without any experience in photo editing.

Step #1. Let's start work

To get started, we suggest installing it on your PC. Follow the instructions of the Installation Wizard - the program will be ready to work in just a minute. Launch the utility. IN start window Select the "Open Photo" option and find the photo file you want to edit.

You can start working immediately after the program is installed

Step #2. Photomontage

The next stage is the most crucial. In the main menu, click on the “Design” tab and find in the list. In the window that appears, create new layer. To do this, click Add Layer > Photo and upload the photo you want to overlay.

With photo montage, you can easily superimpose one photo on top of another.

When choosing a photo, it is worth remembering that both photographs should have approximately the same resolution and quality. Moreover, faces should be shot from as similar an angle as possible.

In the list, select the layer with the added image and click “Crop photo”. A new window will automatically appear. Use any form of trimming. Carefully outline your face, trying to avoid unnecessary objects such as accessories. If it turns out uneven, use the “Reset Selection” option and try again. Close the dotted line by double-clicking the mouse. Increase the value on the Edge Blur scale by dragging the slider to the right and click Apply.

Zoom in on your photo to make the result as accurate and accurate as possible.

Now let's figure out how to insert another face into the photo so that the difference is not noticeable. To do this, you need to transform the cropped layer. Resize the new image by dragging the selection by the corners. The "new" face must match the size of the face in the original image. If necessary, rotate the layer by moving the slider on the Rotation Angle scale. The blend mode will be "Normal" by default, but you can choose a different one if you wish. Ready! Click the "Apply" button.

Adjust the layer overlay so that the “new” face looks as natural as possible

Step #3. Levels and color correction

It's still too obvious that the face was taken from another photo. Let's do some simple color correction. To do this, in the “Image” tab, open “Levels”. It is very easy to understand how to use this function. There are 3 sliders on the “Input Levels” scale – white (light shades), gray (midtones) and black (dark shades). With their help, you can comprehensively adjust the brightness of a photo. Change the position of the sliders to darken (right) or lighten (left) the image. Then save it by clicking "OK".

By adjusting the levels, you can make the picture with the “new” face more monochromatic

Step #4. We work with details

Now you know how to insert another face into a photo as naturally as possible, but your possibilities are not limited to this. If specific areas of the image need processing, use the tools in the panel on the left. Select Blur Brush to make the transition from the original photo even smoother. Adjust the tool parameters - the smaller the object being processed, the smaller the size and transparency of the brush.

You can also darken or lighten certain areas of the photo in the same way, add sharpness, contrast or saturation to them. Simply select the appropriate brush from the toolbar and process the desired part of the image.

Use burn and dodge brushes to add dimension to your image.

Step #5. Save and share with friends

Let's evaluate the final result.

Photo montage will help you try on the role of your favorite movie character

You can adjust the quality of the photo before saving

Ready! Now you know that inserting a face into another photo in Photoshop is not the only solution. This instruction is universal, use it in practice the way you want. Find out and discover new features of the program! "Home Photo Studio" will be for you faithful assistant in any situation where you need to process a photo with high quality.

We have released a new book “Content Marketing in in social networks: How to get into your subscribers’ heads and make them fall in love with your brand.”

There are many tools that are ready to help you improve your website, increase efficiency online business and establish interaction with clients. Many of these tools are free. But what if you're not a web developer and don't know how to install them on your site? This is a big obstacle.

As ironic as it may sound, a business that develops useful tools for your site also has an obstacle to its own prosperity - the need to force the installation of its code on users.

Let's try to solve two problems at once by talking about the most common ways to insert JavaScript code/snippets (fragments) for websites:

• On WordPress.
• Self-written admin panels (using old school FTP).
• On Squarespace.
• On Shopify.

At the end of the article we will touch on Wix. In most cases, this platform does not allow you to install JavaScript codes or snippets, but it does offer an alternative in the form of integrations for various services.

Where can I get the installation code?

Let's see where to look for the installation code using the Crazy Egg service as an example.

The process is standard: we enter registration data, after loading we get to the dashboard. There we look for the section with the code.

How to insert code into a WordPress site

You can use a special plugin – Tracking Code Manager.

To insert Tracking Code Manager, go to the site admin area and look for the plugins section in the control panel.

Select the “Add New” function.

A search bar will appear on the right. Enter “Tracking Code Manager”, then click “Install Now”.

After installation is complete, you need to make sure that the plugin is activated. Let's go to settings.

Click “Add new Tracking Code”.

You can do without the Tracking Code Manager plugin. In this case, our option is to paste the code into the header.php file WordPress themes(more on this later).

How to install code on WordPress.com site

A WordPress website and a WordPress.com website are two different things.

A WordPress site is a site that is managed using a CMS installed on its own server. This means that you paid for the domain name (myname.com) and for hosting.

WordPress.com is free. You can register a website on it without paying for hosting. In this case, the site URL will be: myname.wordpress.com. To change your domain name, you'll have to take a few extra steps.

When you run a site on WordPress.com, you are limited in the JavaScript codes and snippets you can install. The reason is security protocol - the developers do not allow users to paste codes into the platform. For example, the MySpace developers allowed it. This is obviously why the site dropped from 5th place in the world to 1967 in six years.

At the same time, WordPress.com offers users various bonuses for doing business. For example, integration with Google Analytics or the ability to add social media buttons. But in some cases this may not be enough.

How to install JavaScript codes and snippets on a self-written admin panel

Using FTP. We'll have to go back to the basics.

Nowadays many websites are self-written. A self-written website was created from scratch and does not use a CMS to manage content.

Let's imagine that we have just such a site. Putting code on it will be a little more difficult than on WordPress, because you will have to remember about FTP.

FTP managers like FileZilla allow you to drag and drop files and images from a website to a server. Using the program, you can add files to the server or download them, replace old files with new ones, delete unnecessary data, change dock names.

There is nothing complicated about the data transfer protocol: after just 20 minutes you can feel like a pro. For most people, the hardest part is simply contacting the server.

If you have any problems with the server, please contact your hosting provider. It may take an hour, but after 60 minutes you will know everything you need to know. I usually recommend recording these conversations using ScreenRecorder. Or at least make notes by hand.

After you have logged into the FTP server, be sure to do . If you make a mistake, your important files won't go anywhere. You can make a backup copy by simply dragging and dropping all files from the server to your computer.

Typically, the FTP manager software interface consists of two columns. For example, in the image below in the left column you can see files that are stored on the computer. On the right are files from the server.

To change or add files, simply drag them from one column to another.

Warning

Replacing files is dangerous. Can easily be replaced new version old file and lose more current data, accidentally delete something important, or make another mistake. Backup copy allows you to insure yourself in case of such mistakes and protect yourself from unnecessary problems. Be sure to save all files in a separate folder on your computer before making changes.

How to paste code using header.php

Let's say we have a website that we use WordPress to manage. To insert the code, we need to find the header.php file or another file called header or head.
Header needed to activate a JavaScript code or fragment on all pages of the site. To open the file you can use free program like Sublime Text. With its help, you need to open a file that is stored on your computer, and not a similar file on the server.

When we open the file in Sublime Text, we see a rainbow of color code. Don't be afraid, everything is simple there.

All pages are divided into two sections – The head (headings) and the body (body). Headings are indicated by HTML code and . Body - and.

Most of the stuff that makes the site work and display text is located between these two sections. To find these tags, you can use page search.
In most cases, you can insert the code right before the closing tag.

After you have inserted the code or snippet, save the file and upload it to the server. Ready.

Now about self-written admin panels. If your site was built by hand and you can't find the header or header file, you'll likely have to manually insert code into each page. Most often this does not cause much difficulty.

The image above is a hypothetical HTML site that consists of four HTML files. If we wanted to paste some code onto it, we would have to open all these files one by one and paste the code or snippet into the tags of each of them. After this, the process is standard: save the files and upload them to the server instead of the old ones.

How to Embed Code on Squarespace Website

Squarespace has made it easy for its users. To insert JavaScript code or snippet, you can use “code injection”. In the menu, go to the Settings > Advanced > Code Injection tabs. You can add the code to the footer of the site.

Finding the settings.

Scroll down and click on “Advanced”.

Select "Code Injection".

Paste the code and save the changes.

How to embed code on Shopify

In the control panel, find the Online Store section and select Themes.

To access the desired tab, click on “Actions” and select “Edit HTML/CSS”.

We need fragments.

Clicking on the option will open a dialog box with the option to add a new fragment.

Give the snippet a name and click on the Create snippet button.

Enter the code for the snippet in the area for “tracking snippet.liquid”. Click "save".

How to insert a code if the site is on Wix

Wix has quickly become a popular website builder. Like WordPress.com, it places restrictions on its users' ability to paste codes.

But Wix offers a solution in the form of the Wix App Market. There you can find a variety of widgets for marketing, social media and analytics. By the way, you can also vote for the most needed widget there.