Issue with embedded video

Hi,
I want to embed a video that I have in my media library with text wrapping on the right. I am using the following code

<div style="float: left; margin-right: 14px;">
[video  src="https://cyclecilento.com/wp-content/uploads/2014/07/port_agropoli_h264-420_1080p_HQ.mp4" /]
</div>

What I am seeing is that when I put this into the text editor it becomes reset onto the one line when I modify anything in the visual editor. It is changed to the following when I make an edit:

<div style="float: left; margin-right: 14px;">https://cyclecilento.com/wp-content/uploads/2014/07/port_agropoli_h264-420_1080p_HQ.mp4</div>

Once the code is placed on one line after a change in the visual editor, the video does not render correctly as it did before. All I see is the path for the video.

My qestions are, why does the video not render correctly when this change occurs, and why does the change occur in the first place?

many thanks for your help.